/* ============================================================
   安澜心理 APP · 共享样式 v0.3
   v0.3 迭代点：
   1. 圆角升级：卡片 18 → 24-28；按钮新增 24-32 与 pill 并存
   2. 留白节奏：模块间 40 → 64；大区块新增 80；模块内新增 32
   3. 氛围摄影卡组件（新增第 4 形态）
   4. 五元素符号系统（叶子 / 月亮 / 太阳 / 山脉 / 水波）
   5. 远山 SVG 装饰组件
   6. 字阶新增 Display（启动屏 hero）
   字重只用 400 / 500；汉字字距必须为正。
============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--gray-800);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.5px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ---------- Web 容器（v0.4：去手机外框，响应式） ---------- */
.app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--bg);
}

.app__body {
  flex: 1 1 auto;
  padding: 0 var(--space-3) 88px;
}

/* ---------- 顶部站点导航（PC 端显示，手机端隐藏） ---------- */
.site-nav {
  display: none;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-2) var(--space-5);
  align-items: center;
  justify-content: space-between;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(13,31,60,0.06);
  position: sticky; top: 0; z-index: 40;
}
.site-nav__logo {
  font-size: 18px; font-weight: 500; letter-spacing: 2px;
  color: var(--blue-900);
  display: flex; align-items: center; gap: 8px;
}
.site-nav__logo svg { width: 24px; height: 24px; }
.site-nav__menu {
  display: flex; gap: var(--space-5); align-items: center;
}
.site-nav__link {
  font-size: 14px; letter-spacing: 1px; color: var(--gray-600);
  transition: color 200ms;
}
.site-nav__link:hover { color: var(--blue-400); }
.site-nav__link.is-active { color: var(--blue-400); font-weight: 500; }
.site-nav__cta {
  background: var(--blue-400); color: #fff;
  padding: 10px 20px; border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 500; letter-spacing: 0.8px;
}
.site-nav__cta:hover { background: var(--blue-600); }

/* ============================================================
   v0.4 响应式：PC 端（>=768px）切换为多列布局
============================================================ */
@media (min-width: 768px) {
  body { background: var(--bg); }

  /* 隐藏手机顶部返回栏（PC 端用站点导航替代） */
  .app > .topbar { display: none; }
  .site-nav { display: flex; }

  /* 隐藏底部 tab bar（PC 端用站点导航替代） */
  .tabbar { display: none; }

  /* 容器变宽 + 紧凑化 */
  .app {
    max-width: 1080px;
    padding: 0 var(--space-4);
  }
  .app__body {
    padding: var(--space-3) var(--space-4) var(--space-6);
    max-width: 1020px;
    margin: 0 auto;
    width: 100%;
  }

  /* 首页三入口横排 */
  .entry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
  .entry-grid .entry { margin-top: 0 !important; }

  /* 心境卡片：PC 端 grid 2 列放大（v0.4.2：从 3 列改成 2 列，每张更大） */
  .mood-carousel__track {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    overflow: visible;
  }
  .mood-carousel .mood-card { flex: none; width: 100%; }

  /* 横滑卡片改自动网格 */
  .cards-scroll {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    overflow: visible;
  }
  .cards-scroll .card { width: auto !important; flex: none; }

  /* list-item 双列 */
  .list-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
  .list-grid .list-item { margin-top: 0 !important; }

  /* 咨询师卡双列 */
  .counselor-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
  .counselor-grid .card { margin-top: 0 !important; }

  /* SOS 网格更多列 */
  .sos-grid { grid-template-columns: repeat(4, 1fr) !important; }

  /* 测评 list-item 双列 */
  .assessment-list .list-item { width: 100%; }

  /* 文章卡双列 */
  .article-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); align-items: start; }
  .article-grid .card { margin-top: 0 !important; }

  /* 个人中心菜单双列 */
  .profile-menus { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); align-items: start; }
  .profile-menus .menu { margin-top: 0 !important; }

  /* 横滑渐隐提示去掉（PC 端不横滑） */
  .cards-scroll-wrap::after { display: none; }

  /* v0.4.2：PC 端氛围摄影卡图片降高，避免 16/10 在宽屏下高度过大 */
  .card--media .media { aspect-ratio: 21 / 8 !important; max-height: 380px; }
  .card--media .media__body { padding: var(--space-3) var(--space-4); }

  /* section-head 间距紧凑化 */
  .section-head { margin: var(--space-5) 0 var(--space-3); }

  /* PC 端 hover 状态（鼠标反馈） */
  .card:hover, .entry:hover, .list-item:hover, .sos-card:hover {
    box-shadow: 0 0 0 1px var(--blue-200), 0 8px 24px -8px rgba(13,31,60,0.12);
    transform: translateY(-1px);
    transition: all 200ms cubic-bezier(0.2, 0, 0.2, 1);
  }
  .card, .entry, .list-item, .sos-card {
    transition: all 200ms cubic-bezier(0.2, 0, 0.2, 1);
  }
}

/* ---------- 顶栏 ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  min-height: 56px;
}
.brand { font-size: 17px; font-weight: 500; letter-spacing: 1.5px; }
.brand__sub { display: block; font-size: 11px; font-weight: 400; letter-spacing: 1.5px; color: var(--gray-400); }
.topbar__actions { display: flex; align-items: center; gap: var(--space-2); }
.icon-btn {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--gray-800);
}
.icon-btn:active { background: rgba(13,31,60,0.06); }

/* ---------- 诗化标题（v0.3 升级字阶） ---------- */
.hero { padding: var(--space-5) 0 var(--space-4); }
.hero__title {
  font-size: 30px; font-weight: 500; line-height: 1.4; letter-spacing: 1.7px;
  color: var(--blue-900);
}
.hero__sub {
  margin-top: var(--space-2); font-size: 13px; line-height: 1.6;
  letter-spacing: 0.8px; color: var(--gray-400); max-width: 30em;
}
/* v0.3 新增 Display 字阶（启动屏 / hero） */
.display-title {
  font-size: 36px; font-weight: 500; line-height: 1.35; letter-spacing: 1.8px;
  color: var(--blue-900);
}
.display-sub {
  font-family: var(--font-serif); font-style: italic;
  font-size: 14px; line-height: 1.6; letter-spacing: 1px;
  color: var(--blue-300);
}
.section-title {
  font-size: 18px; font-weight: 500; letter-spacing: 1px; line-height: 1.5;
  color: var(--gray-900);
}
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: var(--space-7) 0 var(--space-3);
}
.section-head:first-child { margin-top: var(--space-5); }
.section-head__more { font-size: 11px; letter-spacing: 1.5px; color: var(--gray-400); }
.caption { font-size: 11px; letter-spacing: 1.5px; color: var(--gray-400); }
.kicker { font-size: 11px; letter-spacing: 1.7px; color: var(--blue-300); }

/* ---------- 一句话调性（宋体引言） ---------- */
.verse { padding: var(--space-5) 0; }
.verse__text {
  font-family: var(--font-serif); font-size: 17px; line-height: 1.8; letter-spacing: 1px;
  color: var(--blue-900);
}
.verse__by {
  margin-top: var(--space-2); font-size: 11px; letter-spacing: 1.7px;
  color: var(--gray-400); font-style: italic;
}

/* ---------- v0.3 大圆角主入口卡 ---------- */
.entry {
  display: block;
  border-radius: var(--radius-xl);          /* v0.3：18→28 */
  padding: var(--space-4);                   /* v0.3：24→32 */
  background: var(--blue-100);
  position: relative; overflow: hidden;
  min-height: 144px;                          /* v0.3：128→144 */
}
.entry + .entry { margin-top: var(--space-3); }
.entry__kicker { font-size: 11px; letter-spacing: 1.7px; color: var(--blue-300); }
.entry__title { margin-top: var(--space-1); font-size: 22px; font-weight: 500; letter-spacing: 1.2px; color: var(--blue-900); }
.entry__desc { margin-top: var(--space-1); font-size: 13px; line-height: 1.6; color: var(--blue-600); }
.entry__arrow {
  position: absolute; right: var(--space-4); bottom: var(--space-4);
  color: var(--blue-400);
}
.entry__icon {                                  /* v0.3 新增：入口卡五元素装饰 */
  position: absolute; right: var(--space-4); top: var(--space-4);
  opacity: 0.85;
}

/* ---------- 业务 pill ---------- */
.pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: var(--radius-pill);
  font-size: 13px; letter-spacing: 0.8px;
}
.pill--blue   { background: var(--blue-100);  color: var(--blue-400); }
.pill--amber  { background: var(--amber-50);  color: var(--amber-600); }
.pill--gold   { background: var(--gold);      color: var(--blue-900); }
.pill--ghost  { background: transparent;       color: var(--gray-800); box-shadow: inset 0 0 0 1px var(--gray-200); }

/* v0.4.5：跳转链接型 pill（如情绪急救 → SOS 独立页） */
.pill--link {
  text-decoration: none; color: inherit;
  cursor: pointer;
  gap: 4px;
}
.pill--link:active { transform: scale(0.96); }
.pill__arrow { opacity: 0.7; transition: transform 200ms; }
.pill--link:hover .pill__arrow { transform: translateX(2px); opacity: 1; }
@media (hover: hover) {
  .pill--link:hover { background: var(--blue-50); }
}
.pill.is-active { background: var(--blue-400); color: #fff; }

/* ---------- 卡片（v0.3 升级） ---------- */
.card {
  background: #fff;
  border-radius: var(--radius-lg);            /* v0.3：18→24 */
  padding: var(--space-3);
  box-shadow: var(--shadow-card);
}
.card + .card { margin-top: var(--space-3); }
.card--lg { padding: var(--space-4); border-radius: var(--radius-xl); }
.card--media {                                  /* v0.3 新增：氛围摄影卡 */
  padding: 0; overflow: hidden;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-float);
}
.card--media .media {
  position: relative;
  aspect-ratio: 16 / 9;
  background-size: cover; background-position: center;
}
.card--media .media__tint {
  position: absolute; inset: 0;
  background: var(--photo-tint);
}
.card--media .media__body {
  padding: var(--space-4);
  background: #fff;
}

/* ---------- v0.4.3：文章列表"左图右文"紧凑卡 ---------- */
.article-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
  align-items: flex-start;
}
.article-item__thumb {
  width: 80px; height: 80px;
  border-radius: var(--radius-md);
  background-size: cover; background-position: center;
  background-color: var(--blue-50);
  flex-shrink: 0;
  box-shadow: 0 2px 8px -2px rgba(13, 31, 60, 0.10);
}
.article-item__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.article-item__title {
  font-size: 15px; font-weight: 500;
  line-height: 1.45;
  color: var(--gray-900);
  margin-top: 2px;
}
.article-item__quote {
  font-size: 13px; line-height: 1.55;
  color: var(--gray-500);
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-item + .article-item { margin-top: var(--space-2); }

.row { display: flex; align-items: center; gap: var(--space-2); }
.row--between { justify-content: space-between; }

/* ---------- 磨砂玻璃 ---------- */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border: 1px solid var(--glass-border);
}
.glass--dark {
  background: var(--glass-bg-dark);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
}

/* ---------- 按钮（v0.3 升级：新增大圆角） ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  font-size: 15px; font-weight: 500; letter-spacing: 0.8px;
}
.btn--lg { min-height: 56px; padding: 0 var(--space-5); font-size: 16px; }
.btn--soft { border-radius: var(--radius-lg); }    /* v0.3 新增：大圆角按钮 */
.btn--primary { background: var(--blue-400); color: #fff; }
.btn--primary:active { background: var(--blue-600); }
.btn--ghost { background: transparent; color: var(--blue-400); box-shadow: inset 0 0 0 1px var(--blue-200); }
.btn--glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  color: var(--blue-400);
  border: 1px solid var(--glass-border);
}
.btn--warn { background: var(--warn); color: #fff; }
.btn--warn-soft { background: var(--warn-soft); color: var(--warn); }
.btn--block { width: 100%; }

/* ---------- 头像 ---------- */
.avatar { background: var(--blue-100); display: inline-flex; align-items: center; justify-content: center; color: var(--blue-400); font-weight: 500; }
.avatar--round { border-radius: 50%; }
.avatar--oval { border-radius: 50% / 60%; }

/* ---------- 底部磨砂 tab bar ---------- */
/* ---------- 底部磨砂 tab bar（手机端 fixed 固定底部，PC 端隐藏） ---------- */
.tabbar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  display: flex;
  padding: 8px var(--space-3) calc(8px + env(safe-area-inset-bottom, 0px));
  gap: 4px;
  z-index: 30;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border-top: 1px solid rgba(13,31,60,0.06);
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-height: 56px; padding: 8px 0;
  color: var(--gray-400); font-size: 11px; letter-spacing: 1.2px;
}
.tab svg { width: 22px; height: 22px; }
.tab.is-active { color: var(--blue-400); font-weight: 500; }

/* ---------- 测评 ---------- */
.progress { height: 4px; background: var(--blue-100); border-radius: var(--radius-pill); overflow: hidden; }
.progress__bar { height: 100%; background: var(--blue-400); border-radius: var(--radius-pill); transition: width .3s ease; }
.quiz-q { font-size: 22px; font-weight: 500; line-height: 1.5; letter-spacing: 1.2px; color: var(--blue-900); margin: var(--space-5) 0 var(--space-4); }
.option {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; min-height: 56px; padding: 0 var(--space-4);
  margin-bottom: var(--space-2);
  border-radius: var(--radius-md); background: #fff;       /* v0.3：14→18 */
  box-shadow: 0 0 0 1px rgba(13,31,60,0.06);
  font-size: 15px; color: var(--gray-800); text-align: left; letter-spacing: 0.5px;
}
.option.is-selected { box-shadow: 0 0 0 1.5px var(--blue-400); color: var(--blue-400); }

/* ---------- 文章 ---------- */
.article { padding: var(--space-3) var(--space-3) var(--space-7); }
.article__title { font-size: 26px; font-weight: 500; line-height: 1.5; letter-spacing: 1.4px; color: var(--blue-900); }
.article__meta { margin: var(--space-2) 0; font-size: 11px; letter-spacing: 1.7px; color: var(--gray-400); }
.article__body { font-family: var(--font-serif); font-size: 16px; line-height: 1.9; letter-spacing: 0.8px; color: var(--gray-800); }
.article__body p { margin-bottom: var(--space-3); }
.article__body .lead {
  border-left: 2px solid var(--blue-100); padding-left: var(--space-3);
  color: var(--blue-900); font-size: 17px;
}

/* ---------- 咨询师列表 ---------- */
.counselor { display: flex; gap: var(--space-3); align-items: center; }
.counselor__avatar { width: 64px; height: 80px; border-radius: 50% / 58%; flex: none; }
.counselor__name { font-size: 17px; font-weight: 500; letter-spacing: 0.8px; color: var(--gray-900); }
.counselor__title { font-size: 11px; letter-spacing: 1.5px; color: var(--gray-400); }
.counselor__quote {
  margin-top: var(--space-1);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.5px;
  color: var(--gray-800);
}

/* ---------- 个人中心 ---------- */
.profile-hero {
  background: linear-gradient(180deg, var(--blue-900), var(--blue-800));
  color: #fff;
  padding: var(--space-7) var(--space-4) var(--space-6);
  border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);    /* v0.3：18→32 */
  position: relative; overflow: hidden;
}
.menu { background: #fff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 0 0 1px rgba(13,31,60,0.04); }
.menu__item {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 56px; padding: 0 var(--space-4);
  font-size: 15px; color: var(--gray-800); letter-spacing: 0.8px;
}
.menu__item + .menu__item { border-top: 1px solid rgba(13,31,60,0.06); }
.menu__item .caption { color: var(--gray-400); }

/* ---------- 通用列表项 ---------- */
.list-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4);                                   /* v0.3：24→32 */
  background: #fff; border-radius: var(--radius-lg);         /* v0.3：14→24 */
  box-shadow: 0 0 0 1px rgba(13,31,60,0.04);
}
.list-item + .list-item { margin-top: var(--space-2); }
.list-item__icon {
  width: 44px; height: 44px; border-radius: 50%;            /* v0.3：40→44 */
  display: flex; align-items: center; justify-content: center;
  background: var(--blue-100); color: var(--blue-400); flex: none;
}
.list-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.list-item__name { font-size: 15px; font-weight: 500; color: var(--gray-800); letter-spacing: 0.5px; }
.list-item__meta { font-size: 11px; letter-spacing: 1.5px; color: var(--gray-400); margin-top: 4px; }
.list-item__tag {
  font-size: 11px; letter-spacing: 1px; color: var(--blue-400);
  background: var(--blue-100); border-radius: var(--radius-pill); padding: 4px 12px; flex: none;
}
.list-item__arrow { color: var(--gray-200); flex: none; }

/* ============================================================
   v0.3 新增组件
============================================================ */

/* ---------- 远山 SVG 装饰 ---------- */
.mountain-divider {
  width: 100%; height: 80px;
  display: block;
  margin: var(--space-6) 0 var(--space-2);
}
.mountain-divider--compact { height: 48px; margin: var(--space-4) 0; }

/* ---------- 五元素图标（叶子 / 月亮 / 太阳 / 山脉 / 水波） ---------- */
.element-icon {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--blue-400);
}

/* ---------- SOS 三列卡片网格（MINDORA 标志元素） ---------- */
.sos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}
@media (min-width: 400px) { .sos-grid { grid-template-columns: repeat(3, 1fr); } }
.sos-card {
  aspect-ratio: 1 / 1.05;
  border-radius: var(--radius-lg);
  background: var(--blue-100);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--space-3);
}
.sos-card--warn { background: var(--warn-soft); }
.sos-card__icon {
  position: absolute; top: var(--space-3); left: var(--space-3);
  color: var(--blue-400);
}
.sos-card--warn .sos-card__icon { color: var(--warn); }
.sos-card__title { font-size: 13px; font-weight: 500; letter-spacing: 0.8px; color: var(--blue-900); }
.sos-card--warn .sos-card__title { color: var(--warn); }
.sos-card__meta { font-size: 10px; letter-spacing: 1.2px; color: var(--gray-400); margin-top: 4px; }
.sos-card__badge {
  position: absolute; top: var(--space-3); right: var(--space-3);
  font-size: 9px; letter-spacing: 1px;
  background: var(--gold-light); color: var(--blue-900);
  padding: 3px 8px; border-radius: var(--radius-pill);
}

/* ---------- 水波同心圆装饰（SOS / 情绪页） ---------- */
.ripple-bg {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  opacity: 0.18;
}

/* ---------- 横滑分类 tab ---------- */
.tabs-scroll {
  display: flex; gap: var(--space-1);
  overflow-x: auto; padding: var(--space-2) 0;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tabs-scroll::-webkit-scrollbar { display: none; }
.tabs-scroll .pill { white-space: nowrap; flex: none; }

/* ---------- 横滑大圆角卡片瀑布 ---------- */
.cards-scroll {
  display: flex; gap: var(--space-2);
  overflow-x: auto; padding: var(--space-2) 0;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.cards-scroll::-webkit-scrollbar { display: none; }
.cards-scroll .card { flex: none; width: 240px; }

/* ---------- 今日打卡柱状图 ---------- */
.streak {
  display: flex; gap: 6px; align-items: flex-end;
  margin-top: var(--space-3);
}
.streak__bar {
  flex: 1; height: 56px; border-radius: var(--radius-xs);
  background: var(--blue-100);
  position: relative;
}
.streak__bar.is-active { background: var(--blue-400); }
.streak__bar.is-today { background: var(--blue-200); }
.streak__label {
  position: absolute; bottom: -18px; left: 0; right: 0;
  text-align: center; font-size: 10px; letter-spacing: 1px;
  color: var(--gray-400);
}

/* ---------- 大区块分隔（80px） ---------- */
.divider-major { height: var(--space-8); }

/* ---------- 通用工具 ---------- */
.spacer { height: var(--space-3); }
.center { text-align: center; }
.muted { color: var(--gray-400); }
.serif { font-family: var(--font-serif); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}