/* ============================================================
   陪伴套餐页 · 高端设计系统（2026-10-12 重做）
   设计语言：Soft-Tech 静谧科技（与全站 tokens.css 同源）
   - 品牌墨绿 / 环境网格渐变 / 分层柔光阴影 / 玻璃微光
   - 全部引用 tokens.css 语义变量，自动适配深色模式
   - 全部规则以 #page-companion 作用域隔离，零回归会员中心共用类（.mc-*）
   作用：把「陪伴套餐」从功能清单升级为可对标 Calm/Headspace 的精品服务页。
   ============================================================ */

#page-companion { --cp-accent: var(--brand-2, var(--brand-2)); }

/* ---------- Hero：环境网格渐变 + 玻璃微光 ---------- */
#page-companion .cp-hero {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl, 24px);
  padding: 28px 22px 24px; margin: 2px 0 6px;
  background: var(--brand-mesh);
  color: var(--c-surface);
  box-shadow: var(--sh-3, 0 16px 40px rgba(5, 150, 105, .18));
}
#page-companion .cp-hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .12), transparent 42%);
  pointer-events: none;
}
#page-companion .cp-hero-eyebrow {
  font-size: 11.5px; font-weight: 700; letter-spacing: 2px;
  opacity: .82; text-transform: none;
}
#page-companion .cp-hero h1 {
  font-size: var(--fs-display, 30px); font-weight: 800;
  margin: 7px 0 7px; line-height: 1.18; letter-spacing: -.5px;
}
#page-companion .cp-hero-sub {
  font-size: 13.5px; line-height: 1.65; opacity: .92; max-width: 32ch;
}
#page-companion .cp-hero-pills { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
#page-companion .cp-hero-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; padding: 8px 13px;
  border-radius: var(--r-pill, 999px);
  background: rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .26); color: var(--c-surface);
}
#page-companion .cp-hero-pill i { font-style: normal; }

/* ---------- 区块间距容器 ---------- */
#page-companion .cp-zone { margin-top: 18px; }
#page-companion .cp-block,
#page-companion .cp-care-block {
  background: var(--c-surface, var(--c-surface));
  border: 1px solid var(--c-line, var(--c-line));
  border-radius: var(--r-lg, 18px);
  padding: 16px 15px 18px;
  box-shadow: var(--sh-1);
}
#page-companion .cp-block-desc {
  font-size: 12.5px; color: var(--c-mut, var(--c-mut));
  line-height: 1.6; margin-bottom: 13px;
}

/* ---------- 我的陪伴（已购概览）---------- */
#page-companion #myCareBox:empty { display: none; }
#page-companion .cp-zone:has(> #myCareBox:empty) { display: none; }
#page-companion .my-care-card {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: var(--r-lg, 18px);
  background: linear-gradient(135deg, var(--v-50, var(--brand-purple-soft)), var(--v-100, var(--brand-5)));
  border: 1px solid var(--c-line, var(--c-line));
  box-shadow: var(--sh-1); margin-bottom: 6px;
}
#page-companion .my-care-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
#page-companion .my-care-ico {
  font-size: 22px; width: 40px; height: 40px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px; background: var(--c-surface); box-shadow: var(--sh-1);
}
#page-companion .my-care-title { font-size: 14px; font-weight: 800; color: var(--c-ink, var(--c-ink)); }
#page-companion .my-care-sub { font-size: 11.5px; color: var(--c-mut, var(--c-mut)); margin-top: 2px; }
#page-companion .my-care-btn {
  border: 1px solid var(--v-600, var(--brand-2)); background: var(--c-surface);
  color: var(--v-700, var(--v-700)); font-weight: 700; font-size: 12px;
  padding: 7px 12px; border-radius: var(--r-sm, 10px); cursor: pointer;
  flex-shrink: 0;
}
#page-companion .my-care-item {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--c-sub, var(--c-sub));
  background: var(--c-surface, var(--c-surface));
  border: 1px solid var(--c-line, var(--c-line));
  border-radius: var(--r-sm, 10px); padding: 8px 11px; margin-top: 8px;
}
#page-companion .my-care-aud {
  font-weight: 800; color: var(--v-700, var(--v-700));
  background: var(--v-50, var(--brand-purple-soft)); border-radius: 999px; padding: 1px 8px;
}
#page-companion .my-care-min { color: var(--c-ink, var(--c-ink)); }
#page-companion .my-care-exp { color: var(--c-mut, var(--c-mut)); margin-left: auto; }

/* ---------- 咨询套餐：等级阶梯卡片 ---------- */
#page-companion .cp-consult-list { display: flex; flex-direction: column; gap: 16px; }
#page-companion .cpg-group { margin: 0; }
#page-companion .cpg-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 800; color: var(--c-ink, var(--c-ink));
  padding: 9px 13px; border-radius: var(--r-md, 14px);
  background: var(--c-surface-2, var(--c-surface-2));
  border: 1px solid var(--c-line, var(--c-line)); margin-bottom: 10px;
}
#page-companion .cpg-head::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand-grad); box-shadow: 0 0 0 3px rgba(16, 185, 129, .14);
}
#page-companion .cpg-items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
#page-companion .cpg-item {
  position: relative; display: flex; flex-direction: column; align-items: stretch;
  text-align: left; border: 1.5px solid var(--c-line, var(--c-line));
  border-radius: var(--r-md, 14px); padding: 13px;
  background: var(--c-surface, var(--c-surface)); box-shadow: var(--sh-1);
  transition: transform .2s var(--ease, ease), box-shadow .2s, border-color .2s;
}
#page-companion .cpg-item:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--v-300, var(--brand-4)); }
#page-companion .cpg-item.hot { border-color: var(--v-600, var(--brand-2)); background: linear-gradient(180deg, var(--v-50, var(--brand-purple-soft)), var(--c-surface, var(--c-surface))); }
#page-companion .cpg-tag {
  font-size: 10px; font-weight: 800; color: var(--c-warn, var(--c-warn));
  background: var(--c-warn-bg, var(--c-warn-bg)); border: 1px solid var(--s-amber-200);
  padding: 1px 7px; border-radius: 999px; align-self: flex-start;
}
#page-companion .cpg-name { font-size: 13.5px; font-weight: 700; color: var(--c-ink, var(--c-ink)); margin-top: 7px; }
#page-companion .cpg-price { font-size: 18px; font-weight: 800; color: var(--c-ink, var(--c-ink)); margin-top: 4px; font-variant-numeric: tabular-nums; }
#page-companion .cpg-per { font-size: 11px; color: var(--c-mut, var(--c-mut)); font-weight: 600; }
#page-companion .cpg-buy {
  margin-top: 10px; border: none; border-radius: var(--r-sm, 10px); padding: 10px 0;
  width: 100%; font-size: 13px; font-weight: 800; color: var(--c-surface);
  background: var(--brand-grad); cursor: pointer; font-family: var(--font, inherit);
  box-shadow: 0 8px 18px -10px rgba(5, 150, 105, .6); transition: transform .15s;
}
#page-companion .cpg-buy:active { transform: scale(.97); }

/* ---------- 倾听套餐 / 心力陪护：墨绿卡片（陪伴页作用域）---------- */
#page-companion .cp-listen-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
#page-companion .mc-lpkgs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
#page-companion .mc-lpkg {
  position: relative; display: flex; flex-direction: column; gap: 5px;
  border: 1.5px solid var(--c-line, var(--c-line)); border-radius: var(--r-md, 14px);
  padding: 14px; background: var(--c-surface, var(--c-surface));
  box-shadow: var(--sh-1); overflow: hidden;
  transition: transform .2s var(--ease, ease), box-shadow .2s, border-color .2s;
}
#page-companion .mc-lpkg:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
#page-companion .mc-lpkg.rec {
  border-color: var(--v-600, var(--brand-2));
  background: linear-gradient(180deg, var(--v-50, var(--brand-purple-soft)), var(--c-surface, var(--c-surface)));
  box-shadow: 0 0 0 2px rgba(16, 185, 129, .14), var(--sh-2);
}
#page-companion .mc-plan-flag {
  position: absolute; top: -9px; left: 14px; font-size: 10.5px; font-weight: 800;
  color: var(--c-surface); background: var(--brand-grad); padding: 2px 10px;
  border-radius: 999px; box-shadow: 0 4px 10px -4px rgba(15, 118, 110, .5);
}
#page-companion .mc-lpkg-name { font-size: 14.5px; font-weight: 800; color: var(--c-ink, var(--c-ink)); }
#page-companion .mc-lpkg-price { font-size: 21px; font-weight: 800; color: var(--c-ink, var(--c-ink)); font-variant-numeric: tabular-nums; }
#page-companion .mc-lpkg-price b { font-size: 21px; font-weight: 800; color: var(--c-ink, var(--c-ink)); }
#page-companion .mc-lpkg-get { font-size: 11.5px; color: var(--c-sub, var(--c-sub)); line-height: 1.6; }
#page-companion .mc-lpkg-get b { color: var(--v-700, var(--v-700)); }
#page-companion .mc-lpkg-desc { font-size: 11px; color: var(--c-mut, var(--c-mut)); line-height: 1.5; flex: 1; }
#page-companion .mc-lpkg-buy {
  margin-top: 8px; border: none; border-radius: var(--r-sm, 10px); padding: 10px;
  font-size: 13.5px; font-weight: 800; color: var(--c-surface);
  background: var(--brand-grad); cursor: pointer; font-family: var(--font, inherit);
  box-shadow: 0 8px 18px -10px rgba(5, 150, 105, .6); transition: transform .15s;
}
#page-companion .mc-lpkg-buy:active { transform: scale(.97); }

/* ---------- 心力陪护：人群 tab 切换（少年伴学 / 成年伴行 / 长辈伴安） ---------- */
#page-companion .care-audience-tabs {
  display: flex; gap: 6px; padding: 4px; margin: 2px 0 14px;
  background: var(--c-surface-2, var(--c-surface-2)); border-radius: var(--r-pill, 999px);
}
#page-companion .care-tab {
  flex: 1; border: none; background: transparent; cursor: pointer;
  border-radius: var(--r-pill, 999px); padding: 9px 4px;
  font-size: 13px; font-weight: 800; color: var(--c-sub, var(--c-sub));
  display: flex; align-items: center; justify-content: center; gap: 5px;
  font-family: var(--font, inherit); transition: color .18s, background .18s, box-shadow .18s;
}
#page-companion .care-tab span { white-space: nowrap; }
#page-companion .care-tab.active { background: var(--c-surface, var(--c-surface)); color: var(--cpc-deep, var(--v-700)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cpc, var(--brand-2)) 16%, transparent); }
#page-companion .care-audience-tabs[data-aud="emerald"] { --cpc: var(--brand-3); --cpc-deep: var(--v-700); }
#page-companion .care-audience-tabs[data-aud="teal"]    { --cpc: var(--s-indigo-600); --cpc-deep: #115E59; }
#page-companion .care-audience-tabs[data-aud="amber"]   { --cpc: var(--brand-amber); --cpc-deep: var(--s-amber-700); }

#page-companion .cp-care-intro {
  font-size: 12.5px; color: var(--c-mut, var(--c-mut)); line-height: 1.65;
  margin: -4px 4px 14px;
}
#page-companion .cp-care-block { padding: 14px 13px 15px; }
#page-companion .cp-care-aud {
  position: relative; border: 1px solid var(--c-line, var(--c-line)); border-radius: var(--r-lg, 18px);
  padding: 15px 14px 16px; background: var(--c-surface, var(--c-surface)); box-shadow: var(--sh-1);
  margin-bottom: 14px; overflow: hidden;
}
#page-companion .cp-care-aud:last-child { margin-bottom: 0; }
/* 左侧主题色竖条：用各块的 --cpc 变量，三块颜色各异却同属品牌家族 */
#page-companion .cp-care-aud::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--cpc, var(--v-600, var(--brand-2)));
}
#page-companion .cp-care-aud-hd { display: flex; align-items: center; gap: 12px; }
#page-companion .cp-care-aud-ico {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; font-size: 24px;
  background: var(--cpc-soft, var(--v-50, var(--brand-purple-soft)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cpc, var(--brand-2)) 26%, transparent);
}
#page-companion .cp-care-aud-title { font-size: 16px; font-weight: 800; color: var(--c-ink, var(--c-ink)); letter-spacing: -.2px; }
#page-companion .cp-care-aud-slogan { font-size: 11.5px; font-weight: 700; color: var(--cpc-deep, var(--v-700, var(--v-700))); margin-top: 2px; }
#page-companion .cp-care-aud-desc {
  font-size: 12.5px; color: var(--c-sub, var(--c-sub)); line-height: 1.72;
  margin: 11px 0 11px; padding-left: 4px;
}
#page-companion .cp-care-bens { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 13px; padding-left: 4px; }
#page-companion .cp-care-ben {
  font-size: 11px; font-weight: 700; color: var(--cpc-deep, var(--v-700, var(--v-700)));
  background: var(--cpc-soft, var(--v-50, var(--brand-purple-soft)));
  border: 1px solid color-mix(in srgb, var(--cpc, var(--brand-2)) 22%, transparent);
  border-radius: 999px; padding: 3px 10px;
}
#page-companion .cp-care-aud .mc-lpkgs { margin-top: 2px; }
#page-companion .cp-care-aud .care-pkg-slogan { color: var(--c-sub, var(--c-sub)); }

/* 主题色：少年=翡翠绿 / 成年=青绿 / 长辈=暖琥珀（生命三阶段「活力 → 沉稳 → 温暖」叙事，均在品牌点缀色域内） */
#page-companion .cp-care-aud[data-aud="emerald"] { --cpc: var(--brand-3); --cpc-deep: var(--v-700); --cpc-soft: var(--brand-purple-soft); }
#page-companion .cp-care-aud[data-aud="teal"]    { --cpc: var(--s-indigo-600); --cpc-deep: #115E59; --cpc-soft: var(--s-teal-50); }
#page-companion .cp-care-aud[data-aud="amber"]   { --cpc: var(--brand-amber); --cpc-deep: var(--s-amber-700); --cpc-soft: var(--s-amber-50); }

/* ---------- 心力陪护：卡片细节 ---------- */
#page-companion .care-pkg-tag {
  font-size: 10px; font-weight: 800; color: var(--v-700, var(--v-700));
  background: var(--v-50, var(--brand-purple-soft)); border: 1px solid var(--v-200, var(--brand-5));
  border-radius: 999px; padding: 1px 8px; align-self: flex-start;
}
#page-companion .care-pkg-slogan { font-size: 11.5px; color: var(--c-mut, var(--c-mut)); margin-top: 2px; }
#page-companion .mc-lpkg-price s { color: var(--c-mut, var(--c-mut)); font-weight: 600; font-size: 12px; margin-left: 5px; }
#page-companion .care-pkg-period { font-size: 11px; color: var(--c-mut, var(--c-mut)); font-weight: 600; margin-left: 2px; }
#page-companion .care-pkg-feats { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
#page-companion .care-pkg-feats li { position: relative; padding-left: 16px; font-size: 11.5px; color: var(--c-sub, var(--c-sub)); line-height: 1.5; }
#page-companion .care-pkg-feats li::before { content: "✓"; position: absolute; left: 0; color: var(--v-600, var(--brand-2)); font-weight: 800; }

/* ---------- 空态 ---------- */
#page-companion .mc-empty {
  text-align: center; color: var(--c-mut, var(--c-mut)); font-size: 13px; padding: 24px;
  background: var(--c-surface-2, var(--c-surface-2)); border: 1px dashed var(--c-line, var(--c-line));
  border-radius: var(--r-md, 14px);
}

/* ---------- 信任保障 + 脚注 ---------- */
#page-companion .cp-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 20px 0 6px; }
#page-companion .cp-trust-i {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  padding: 14px 10px; border-radius: var(--r-md, 14px);
  background: var(--c-surface, var(--c-surface)); border: 1px solid var(--c-line, var(--c-line)); box-shadow: var(--sh-1);
}
#page-companion .cp-trust-ico { font-size: 22px; }
#page-companion .cp-trust-t { font-size: 12.5px; font-weight: 800; color: var(--c-ink, var(--c-ink)); }
#page-companion .cp-trust-d { font-size: 10.5px; color: var(--c-mut, var(--c-mut)); line-height: 1.5; }
#page-companion .cp-foot {
  text-align: center; font-size: 11.5px; color: var(--c-mut, var(--c-mut));
  margin: 14px 0 4px; line-height: 1.6;
}

/* ---------- 响应式 ---------- */
@media (max-width: 560px) {
  #page-companion .cp-listen-list,
  #page-companion .mc-lpkgs,
  #page-companion .cpg-items { grid-template-columns: 1fr; }
  #page-companion .cp-trust { grid-template-columns: 1fr; }
}

/* ---------- 深色模式适配（变量已切换，仅补几处混合底色）---------- */
@media (prefers-color-scheme: dark) {
  #page-companion .my-care-card { background: linear-gradient(135deg, var(--bg-2, var(--c-surface-2)), var(--bg-1, var(--c-surface))); border-color: var(--c-line); }
  #page-companion .my-care-ico, #page-companion .my-care-btn { background: var(--bg-1, var(--c-surface)); }
  #page-companion .mc-lpkg.rec { background: linear-gradient(180deg, var(--bg-2, var(--c-surface-2)), var(--bg-1, var(--c-surface))); }
  #page-companion .cpg-item.hot { background: linear-gradient(180deg, var(--bg-2, var(--c-surface-2)), var(--bg-1, var(--c-surface))); }
  #page-companion .cp-trust-i { background: var(--bg-1, var(--c-surface)); }
  #page-companion .cp-care-aud { background: var(--bg-1, var(--c-surface)); border-color: var(--c-line); }
  #page-companion .cp-care-aud-ico,
  #page-companion .cp-care-ben { background: var(--bg-2, var(--c-surface-2)); }
  #page-companion .cp-care-aud-slogan,
  #page-companion .cp-care-ben { color: var(--cpc, var(--brand-2)); }
}

/* ---------- 咨询套餐：等级 tab 切换（靛蓝主题，与陪护绿系区分） ---------- */
#page-companion .cp-consult-tabs {
  display: flex; gap: 6px; padding: 4px; margin: 2px 0 12px;
  background: var(--c-surface-2, var(--c-surface-2)); border-radius: var(--r-pill, 999px);
}
#page-companion .cp-consult-tab {
  flex: 1; border: none; background: transparent; cursor: pointer;
  border-radius: var(--r-pill, 999px); padding: 9px 4px;
  font-size: 13px; font-weight: 800; color: var(--c-sub, var(--c-sub));
  display: flex; align-items: center; justify-content: center; gap: 5px;
  font-family: var(--font, inherit); transition: color .18s, background .18s, box-shadow .18s;
}
#page-companion .cp-consult-tab span { white-space: nowrap; }
#page-companion .cp-consult-tab.active {
  background: var(--c-surface, var(--c-surface)); color: #4338CA;
  box-shadow: 0 0 0 3px color-mix(in srgb, #6366F1 16%, transparent);
}
#page-companion .cp-consult-head {
  position: relative; overflow: hidden;
  border: 1px solid color-mix(in srgb, #6366F1 22%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, #6366F1 8%, var(--c-surface, var(--c-surface))), var(--c-surface, var(--c-surface)));
  border-radius: var(--r-lg, 18px); padding: 13px 14px 14px;
}
#page-companion .cp-consult-head::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, #818CF8, #4F46E5);
}
#page-companion .cp-consult-badge {
  display: inline-flex; align-items: center; gap: 5px; margin-left: 4px;
  font-size: 12px; font-weight: 800; color: #4338CA;
  background: color-mix(in srgb, #6366F1 14%, var(--c-surface, var(--c-surface)));
  border: 1px solid color-mix(in srgb, #6366F1 24%, transparent);
  border-radius: 999px; padding: 3px 11px;
}
#page-companion .cp-consult-desc { font-size: 13px; color: var(--c-ink, var(--c-ink)); font-weight: 600; line-height: 1.7; margin: 10px 0 6px 4px; }
#page-companion .cp-consult-note { font-size: 11.5px; color: var(--c-mut, var(--c-mut)); font-weight: 600; margin-left: 4px; }

@media (prefers-color-scheme: dark) {
  #page-companion .cp-consult-tab.active { color: #A5B4FC; box-shadow: 0 0 0 3px color-mix(in srgb, #818CF8 22%, transparent); }
  #page-companion .cp-consult-badge { color: #A5B4FC; }
  #page-companion .cp-consult-desc { color: var(--c-ink, #EAF2EE); }
  #page-companion .cp-consult-head { background: linear-gradient(180deg, color-mix(in srgb, #6366F1 16%, var(--bg-1, var(--c-surface))), var(--bg-1, var(--c-surface))); }
}