/* ═══════════════════════════════════════════
   VELA NOVA — components.css
   按钮 · 卡片 · 表单 · 徽章 · 进度条
   统计 · 标签 · AI对话 · 博客卡片等
   ═══════════════════════════════════════════ */

/* ══════════════════════════════════════════
   Page Header（页面通用标题区）
   ══════════════════════════════════════════ */
.eyebrow {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 10px;
  display: block;
}

.pg-title {
  font-family: var(--fd);
  font-size: 40px;
  font-weight: 300;
  color: var(--white);
  line-height: 1.15;
  margin-bottom: 10px;
}

.pg-sub {
  font-size: 14px;
  color: var(--white3);
  margin-bottom: var(--space-md);
  line-height: 1.7;
  max-width: 520px;
}

/* ══════════════════════════════════════════
   卡片（升级：hover上移 + 边框过渡）
   ══════════════════════════════════════════ */
.card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 24px 26px;
  margin-bottom: 18px;
  transition:
    border-color var(--dur-base) var(--ease),
    transform var(--dur-base) var(--ease);
}
.card:hover {
  border-color: var(--gold-border);
  transform: translateY(-2px);
}

.card-title {
  font-family: var(--fd);
  font-size: 19px;
  font-weight: 400;
  color: var(--white);
  margin-bottom: 5px;
}
.card-sub {
  font-size: 13px;
  color: var(--white4);
  margin-bottom: 18px;
}

/* ══════════════════════════════════════════
   按钮（升级：hover上移 + cubic-bezier）
   ══════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-family: var(--fb);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--dur-base) var(--ease);
  border: none;
  text-decoration: none;
  letter-spacing: 0.01em;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-g    { background: var(--sage); color: var(--night); }
.btn-g:hover { background: var(--mist); }

.btn-gold { background: var(--gold); color: var(--night); }
.btn-gold:hover { background: #d4b36a; }

.btn-ghost {
  background: none;
  color: var(--white2);
  border: 1px solid var(--glass-border2);
}
.btn-ghost:hover {
  background: var(--glass2);
  border-color: var(--mist);
  color: var(--white);
}

.btn-full { width: 100%; }

/* Generate按钮（Landing专用）*/
.btn-generate {
  width: 100%;
  margin-top: 14px;
  padding: 14px;
  background: var(--gold);
  border: none;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  color: #0d0f0a;
  cursor: pointer;
  font-family: var(--fb);
  transition: all var(--dur-base) var(--ease);
  letter-spacing: 0.02em;
}
.btn-generate:hover {
  background: #d4b36a;
  transform: translateY(-2px);
}

/* ══════════════════════════════════════════
   表单
   ══════════════════════════════════════════ */
.fg { margin-bottom: 16px; }

.fl {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--white3);
  margin-bottom: 6px;
}

.fi {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid rgba(255,255,255,0.40);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-family: var(--fb);
  color: var(--white);
  background: rgba(255,255,255,0.16);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease);
}
.fi:focus { border-color: var(--sage); outline: none; }
select.fi { cursor: pointer; appearance: auto; }
select.fi option,
select.fi optgroup {
  background: #142010;
  color: #f5f2ed;
}

/* 全局所有select的option颜色统一（覆盖系统默认）*/
select option {
  background: #142010;
  color: #f5f2ed;
}
textarea.fi { resize: vertical; min-height: 80px; }

/* Birth form（Landing专用）*/
.birth-form {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 26px;
  max-width: 420px;
}
.birth-form-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white4);
  margin-bottom: 18px;
}
.birth-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.birth-row.three { grid-template-columns: 1fr 1fr 1fr; }
.birth-field { display: flex; flex-direction: column; gap: 5px; }
.birth-field label {
  font-size: 11px;
  color: var(--white4);
  font-weight: 500;
}
.birth-field input,
.birth-field select {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 13px;
  color: var(--white);
  font-family: var(--fb);
  outline: none;
  transition: border-color var(--dur-fast);
}
.birth-field input:focus,
.birth-field select:focus { border-color: var(--gold); }
.birth-field select option { background: #1a2318; color: var(--white); }

/* ══════════════════════════════════════════
   进度条
   ══════════════════════════════════════════ */
.pb-wrap {
  background: var(--glass2);
  border-radius: 4px;
  height: 5px;
  overflow: hidden;
  margin-bottom: 5px;
}
.pb-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--sage);
  transition: width 0.7s var(--ease);
}
.pb-fill.gold  { background: var(--gold); }
.pb-fill.terra { background: var(--terra); }

/* ══════════════════════════════════════════
   Macro行
   ══════════════════════════════════════════ */
.mr { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.mn { font-size: 13px; color: var(--white3); width: 90px; flex-shrink: 0; }
.mb { flex: 1; background: var(--glass2); border-radius: 3px; height: 5px; }
.mf { height: 100%; border-radius: 3px; background: var(--sage); }
.mv { font-size: 12px; color: var(--white4); width: 52px; text-align: right; }

/* ══════════════════════════════════════════
   评分点
   ══════════════════════════════════════════ */
.rr { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.rl { font-size: 13px; color: var(--white3); width: 110px; flex-shrink: 0; }
.rd { display: flex; gap: 5px; }
.dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--glass-border2);
  background: none;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--white4);
  font-family: var(--fb);
}
.dot:hover, .dot.on {
  background: var(--sage);
  border-color: var(--sage);
  color: var(--night);
}

/* ══════════════════════════════════════════
   症状Chip
   ══════════════════════════════════════════ */
.sg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-bottom: 16px;
}
.chip {
  padding: 9px 10px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--white3);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
  text-align: center;
  background: none;
  font-family: var(--fb);
}
.chip:hover { border-color: var(--sage); color: var(--white); }
.chip.sel {
  background: rgba(90,144,112,0.18);
  border-color: var(--sage);
  color: var(--white);
}

/* ══════════════════════════════════════════
   统计格子
   ══════════════════════════════════════════ */
.stat-g {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: var(--space-md);
}
.stat {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 18px 16px;
  text-align: center;
  transition: border-color var(--dur-base) var(--ease);
}
.stat:hover { border-color: var(--gold-border); }
.stat-v {
  font-family: var(--fd);
  font-size: 30px;
  font-weight: 300;
  color: var(--white);
  line-height: 1;
  margin-bottom: 5px;
}
.stat-v.gold { color: var(--gold); }
.stat-v.sage { color: var(--sage); }
.stat-l {
  font-size: 10.5px;
  color: var(--white4);
  letter-spacing: 0.04em;
}

/* ══════════════════════════════════════════
   Pill Tabs
   ══════════════════════════════════════════ */
.ptabs {
  display: flex;
  gap: 5px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.ptab {
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  font-family: var(--fb);
  cursor: pointer;
  border: 1px solid var(--glass-border);
  background: none;
  color: var(--white3);
  transition: all var(--dur-fast) var(--ease);
}
.ptab:hover { border-color: var(--sage); color: var(--white); }
.ptab.on {
  background: var(--sage);
  color: var(--night);
  border-color: var(--sage);
  font-weight: 500;
}

/* ══════════════════════════════════════════
   Insight 卡片
   ══════════════════════════════════════════ */
.insight {
  background: rgba(61,107,79,0.2);
  border: 1px solid rgba(90,144,112,0.3);
  border-left: 2px solid var(--sage);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 14px 18px;
  margin-bottom: 16px;
}
.insight-t {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--sage);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.insight-b {
  font-size: 13.5px;
  color: var(--white2);
  line-height: 1.65;
}

/* ══════════════════════════════════════════
   联盟产品卡
   ══════════════════════════════════════════ */
.aff {
  background: var(--gold-pale);
  border: 1px solid var(--gold-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  transition: border-color var(--dur-base) var(--ease);
}
.aff:hover { border-color: rgba(196,163,90,0.4); }
.aff-badge {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gold);
  background: rgba(196,163,90,0.15);
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
  text-transform: uppercase;
}
.aff-name  { font-size: 13.5px; font-weight: 500; color: var(--white); flex: 1; }
.aff-desc  { font-size: 12px; color: var(--white3); }

/* ══════════════════════════════════════════
   博客卡片（升级：色条+hover）
   ══════════════════════════════════════════ */
.blog-g {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.bc {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition:
    border-color var(--dur-base) var(--ease),
    transform var(--dur-base) var(--ease);
  text-decoration: none;
  display: block;
}
.bc:hover {
  border-color: var(--sage);
  transform: translateY(-3px);
}
.bc-bar       { height: 3px; background: var(--sage); }
.bc-bar.gold  { background: var(--gold); }
.bc-bar.terra { background: var(--terra); }
.bc-bar.deep  { background: var(--mist); }
.bc-body      { padding: 18px; }
.bc-tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 8px;
}
.bc-tag.gold  { color: var(--gold); }
.bc-tag.terra { color: var(--terra); }
.bc-h {
  font-family: var(--fd);
  font-size: 17px;
  font-weight: 400;
  color: var(--white);
  margin-bottom: 7px;
  line-height: 1.35;
}
.bc-d {
  font-size: 12.5px;
  color: var(--white4);
  line-height: 1.55;
}

/* ══════════════════════════════════════════
   Hub（功能入口格子）
   ══════════════════════════════════════════ */
.hubs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: var(--space-md);
}
.hub {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 18px 16px;
  cursor: pointer;
  transition: all var(--dur-base) var(--ease);
  text-align: left;
}
.hub:hover {
  border-color: var(--sage);
  background: var(--glass2);
  transform: translateY(-2px);
}
.hub-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(90,144,112,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  color: var(--sage);
  font-size: 16px;
}
.hub-n { font-size: 13px; font-weight: 500; color: var(--white); margin-bottom: 2px; }
.hub-c { font-size: 11.5px; color: var(--white4); }

/* ══════════════════════════════════════════
   AI对话
   ══════════════════════════════════════════ */
.ai-msgs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 14px;
  max-height: 340px;
  overflow-y: auto;
  padding: 2px;
}
.msg { display: flex; gap: 9px; align-items: flex-start; }
.msg.u { flex-direction: row-reverse; }
.av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 600;
}
.av.v { background: var(--sage); color: var(--night); }
.av.u { background: var(--glass2); color: var(--white3); border: 1px solid var(--glass-border2); }
.bubble {
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 13.5px;
  line-height: 1.6;
  max-width: 82%;
}
.bubble.v { background: var(--glass2); color: var(--white2); border: 1px solid var(--glass-border); }
.bubble.u { background: var(--sage); color: var(--night); }

.ai-in { display: flex; gap: 8px; align-items: center; }
.ai-inp {
  flex: 1;
  padding: 9px 14px;
  border: 1px solid var(--glass-border2);
  border-radius: var(--radius-pill);
  font-size: 13.5px;
  font-family: var(--fb);
  color: var(--white);
  background: var(--glass2);
  outline: none;
  transition: border-color var(--dur-fast);
}
.ai-inp:focus { border-color: var(--sage); }

/* ══════════════════════════════════════════
   Stat Strip（统计条）
   ══════════════════════════════════════════ */
.stat-strip {
  display: flex;
  gap: 32px;
  margin-bottom: 48px;
  padding: 24px 0;
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
}
.ss { text-align: left; }
.ss-v {
  font-family: var(--fd);
  font-size: 36px;
  font-weight: 300;
  color: var(--gold);
  line-height: 1;
}
.ss-l {
  font-size: 11.5px;
  color: var(--white4);
  margin-top: 3px;
}

/* ══════════════════════════════════════════
   Badge
   ══════════════════════════════════════════ */
.badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(90,144,112,0.2);
  color: var(--sage);
}
.badge.gold { background: var(--gold-pale); color: var(--gold); }

/* ══════════════════════════════════════════
   周期阶段条目
   ══════════════════════════════════════════ */
.cp {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 7px;
  border: 1px solid var(--glass-border);
  transition: border-color var(--dur-fast);
}
.cp:hover { border-color: var(--glass-border2); }
.cdot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.cn   { font-size: 13.5px; font-weight: 500; color: var(--white); }
.cd   { font-size: 12px; color: var(--white4); margin-left: auto; }

/* ══════════════════════════════════════════
   Report区块
   ══════════════════════════════════════════ */
.rs  { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 14px; margin-bottom: 10px; }
.rst { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--white4); margin-bottom: 8px; }

/* ══════════════════════════════════════════
   断食计时器
   ══════════════════════════════════════════ */
.fast-wrap  { display: flex; justify-content: center; margin: 20px 0; position: relative; }
.fast-ct    { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; }
.fast-t     { font-family: var(--fd); font-size: 38px; font-weight: 300; color: var(--white); line-height: 1; }
.fast-l     { font-size: 10.5px; color: var(--white4); letter-spacing: 0.08em; text-transform: uppercase; }

/* ══════════════════════════════════════════
   Profile Avatar
   ══════════════════════════════════════════ */
.pav {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--canopy);
  border: 2px solid var(--glass-border2);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fd);
  font-size: 26px;
  margin-bottom: 16px;
}

/* ══════════════════════════════════════════
   Disclaimer / Disc
   ══════════════════════════════════════════ */
.disc {
  font-size: 11.5px;
  color: var(--white4);
  font-style: italic;
  padding: 10px 14px;
  border-left: 2px solid var(--glass-border2);
  margin-top: 16px;
  line-height: 1.6;
}

/* ══════════════════════════════════════════
   成功状态（隐藏）
   ══════════════════════════════════════════ */
#checkin-success,
#symptom-success,
#period-success,
#profile-success { display: none; }

/* ══════════════════════════════════════════
   手机端响应式（< 768px）
   ══════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── 页面标题 ── */
  .pg-title {
    font-size: 26px;
    margin-bottom: 8px;
  }
  .pg-sub {
    font-size: 13px;
    margin-bottom: 20px;
  }

  /* ── 卡片内边距收窄 ── */
  .card {
    padding: 18px 16px;
    margin-bottom: 14px;
  }

  /* ── 评分行：竖排，label在上、dot在下 ── */
  .rr {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 18px;
  }
  .rl {
    width: auto;
    font-size: 12.5px;
  }
  .rd {
    gap: 8px;
  }
  .dot {
    width: 36px;
    height: 36px;
    font-size: 13px;
  }

  /* ── 症状chip：2列 ── */
  .sg {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .chip {
    font-size: 12px;
    padding: 10px 8px;
  }

  /* ── 统计格子：2列 ── */
  .stat-g {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .stat-v {
    font-size: 24px;
  }

  /* ── Hub入口：2列 ── */
  .hubs {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .hub {
    padding: 14px 12px;
  }
  .hub-n { font-size: 12px; }
  .hub-c { font-size: 11px; }

  /* ── 博客卡片：1列 ── */
  .blog-g {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* ── 出生日期3列 → 1列+flex ── */
  .birth-row {
    grid-template-columns: 1fr 1fr;
  }
  .birth-row.three {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .birth-row.three .birth-field input,
  .birth-row.three .birth-field select {
    padding: 8px 8px;
    font-size: 12px;
  }

  /* ── Stat Strip：竖排 ── */
  .stat-strip {
    flex-direction: column;
    gap: 16px;
    padding: 16px 0;
    margin-bottom: 28px;
  }

  /* ── Pill Tabs：横向滚动 ── */
  .ptabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    gap: 6px;
    margin-bottom: 18px;
    /* 隐藏滚动条 */
    scrollbar-width: none;
  }
  .ptabs::-webkit-scrollbar { display: none; }
  .ptab {
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 12px;
    padding: 5px 12px;
  }

  /* ── AI对话气泡 ── */
  .bubble {
    font-size: 13px;
  }

  /* ── 联盟产品卡：竖排 ── */
  .aff {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* Stars hub grid：手机端1列 */
@media (max-width: 767px) {
  .stars-hub-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ══════════════════════════════════════════
   右侧面板（今日快览）
   ══════════════════════════════════════════ */
.rp-date-line {
  font-family: var(--fb);
  font-size: 11px;
  color: var(--white4);
  letter-spacing: 0.06em;
  padding: 0 16px 12px;
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: 4px;
}

.rp .rp-card {
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--glass-border);
  background: none;
  padding: 16px;
  margin-bottom: 0;
  transition: background var(--dur-fast);
}
.rp .rp-card:hover { background: var(--glass); transform: none; }

/* 月相行 */
.rp-moon-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.rp-moon-emoji { font-size: 22px; }
.rp-moon-name {
  font-family: var(--fb);
  font-size: 13px;
  font-weight: 500;
  color: var(--white);
}
.rp-moon-sub {
  font-size: 11px;
  color: var(--white4);
  margin-top: 2px;
}

/* 周期显示 */
.rp-cycle-day {
  font-family: var(--fd);
  font-size: 28px;
  font-weight: 300;
  color: var(--gold);
  line-height: 1;
  margin: 8px 0 4px;
}
.rp-cycle-phase {
  font-size: 12px;
  color: var(--white3);
  margin-bottom: 4px;
}
.rp-cycle-tip {
  font-size: 11.5px;
  color: var(--white4);
  line-height: 1.5;
}

/* Wellbeing格子 */
.rp-wb-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 6px;
  margin-top: 8px;
}
.rp-wb-item {
  text-align: center;
  background: var(--glass);
  border-radius: 8px;
  padding: 10px 4px;
}
.rp-wb-val {
  font-family: var(--fd);
  font-size: 20px;
  font-weight: 300;
  color: var(--white);
  line-height: 1;
}
.rp-wb-label {
  font-size: 10px;
  color: var(--white4);
  margin-top: 4px;
}

/* 快捷链接 */
.rp-quick-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.rp-quick-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-family: var(--fb);
  color: var(--white3);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
  text-align: left;
  width: 100%;
}
.rp-quick-btn:hover {
  background: var(--glass2);
  border-color: var(--glass-border2);
  color: var(--white);
}
.rp-quick-icon { font-size: 14px; flex-shrink: 0; }

/* ══════════════════════════════════════════
   Stars Panel 入口升级
   ══════════════════════════════════════════ */
/* 主入口：两行大卡 */
.stars-main-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.stars-main-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease);
}
.stars-main-card:hover {
  border-color: var(--gold-border);
  background: var(--glass2);
  transform: translateY(-1px);
}
.stars-main-icon { font-size: 24px; flex-shrink: 0; }
.stars-main-body { flex: 1; }
.stars-main-title {
  font-family: var(--fd);
  font-size: 18px;
  font-weight: 400;
  color: var(--white);
  margin-bottom: 3px;
}
.stars-main-desc {
  font-size: 12.5px;
  color: var(--white4);
  line-height: 1.5;
}
.stars-main-arrow {
  font-size: 18px;
  color: var(--white4);
  transition: transform var(--dur-fast);
}
.stars-main-card:hover .stars-main-arrow {
  transform: translateX(4px);
  color: var(--gold);
}

/* 次级入口：2×2格子 */
.stars-sub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.stars-sub-card {
  padding: 16px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease);
  text-align: left;
}
.stars-sub-card:hover {
  border-color: var(--sage);
  background: var(--glass2);
  transform: translateY(-1px);
}
.stars-sub-card.pro-sub-card:hover { border-color: var(--gold-border); }
.stars-sub-icon { font-size: 20px; margin-bottom: 8px; display: block; }
.stars-sub-title {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--white);
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.stars-sub-desc {
  font-size: 11.5px;
  color: var(--white4);
}

/* 手机端响应式 */
@media (max-width: 767px) {
  .stars-main-card { padding: 14px 16px; gap: 12px; }
  .stars-main-icon { font-size: 20px; }
  .stars-sub-grid { grid-template-columns: repeat(2,1fr); gap: 8px; }
  .stars-sub-card { padding: 12px; }
}

/* ══════════════════════════════════════════
   Share Panel — 模块入口列表
   ══════════════════════════════════════════ */
.share-card-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
  margin-bottom: 32px;
}
.share-card-entry {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease);
}
.share-card-entry:hover {
  border-color: rgba(196,163,90,0.35);
  background: var(--glass2);
  transform: translateY(-1px);
}
.share-card-entry-icon {
  font-size: 22px;
  flex-shrink: 0;
  width: 36px;
  text-align: center;
}
.share-card-entry-body {
  flex: 1;
}
.share-card-entry-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--white);
  margin-bottom: 2px;
  display: flex;
  align-items: center;
}
.share-card-entry-desc {
  font-size: 12px;
  color: var(--white4);
}
.share-card-entry-arrow {
  font-size: 16px;
  color: var(--white4);
  transition: all var(--dur-fast);
  flex-shrink: 0;
}
.share-card-entry:hover .share-card-entry-arrow {
  color: var(--gold);
  transform: translate(2px, -2px);
}

@media (max-width: 767px) {
  .share-card-entry { padding: 14px 16px; }
  .share-card-entry-icon { font-size: 20px; }
}

/* ══════════════════════════════════════════
   手机端全面修复 v3.48
   覆盖所有功能模块的手机排版问题
   ══════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── 通用：页面容器 ── */
  .page {
    padding: 20px 16px 80px; /* 底部留tab-bar空间 */
  }

  /* ── Stars Panel 入口 ── */
  .stars-main-grid { gap: 8px; margin-bottom: 12px; }
  .stars-main-card { padding: 14px 14px; gap: 10px; }
  .stars-main-icon { font-size: 20px; }
  .stars-main-title { font-size: 16px; }
  .stars-main-desc { font-size: 11.5px; }
  .stars-sub-grid { grid-template-columns: repeat(2,1fr); gap: 8px; }
  .stars-sub-card { padding: 12px; }
  .stars-sub-icon { font-size: 18px; margin-bottom: 6px; }
  .stars-sub-title { font-size: 12.5px; }
  .stars-sub-desc { font-size: 11px; }

  /* Key Placements grid → see authority definition below */

  /* ── Tarot 牌面 ── */
  .tarot-scene {
    width: 160px;
    height: 272px;
  }

  /* ── Today's Report ── */
  #today-panel-inner,
  #today-wrap {
    padding: 0;
  }

  /* ── Share 入口列表 ── */
  .share-card-grid { gap: 8px; }
  .share-card-entry { padding: 13px 14px; gap: 12px; }
  .share-card-entry-icon { font-size: 18px; width: 28px; }
  .share-card-entry-title { font-size: 13.5px; }
  .share-card-entry-desc { font-size: 11px; }

  /* ── 分享卡Modal ── */
  #vela-share-card-modal > div {
    max-width: 100% !important;
    margin: 0 8px;
    padding: 16px !important;
  }
  #vela-share-card-modal img {
    border-radius: 8px !important;
  }

  /* ── 右侧面板（手机已隐藏，确保不占位）── */
  .rp { display: none !important; }

  /* ── topbar trial badge 手机端缩小 ── */
  #topbar-trial-badge {
    font-size: 10px !important;
    padding: 3px 8px !important;
  }

  /* ── Doctor Report topbar按钮手机隐藏 ── */
  .topbar-r .tbtn:not(.g):not(#topbar-trial-badge) {
    display: none;
  }

  /* ── Body首页入口格子：2列 ── */
  #panel-body .page > div[style*="grid"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  /* ── Cycle Tracker tabs ── */
  #cycle-tabs .ptab { font-size: 11.5px; padding: 5px 10px; }

  /* ── Sleep Tracker slider ── */
  .sleep-hours-slider { width: 100% !important; }

  /* ── Perimenopause问卷 ── */
  #peri-questionnaire { padding: 16px !important; }
  .peri-question { margin-bottom: 16px; }

  /* ── Advisor chips横向滚动 ── */
  .advisor-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 10px 16px;
  }
  .advisor-chips::-webkit-scrollbar { display: none; }
  .advisor-chip { flex-shrink: 0; }

  /* ── Advisor输入框 ── */
  .advisor-input-row { padding: 10px 16px 12px; }
  .advisor-input { font-size: 15px; } /* 防止iOS自动放大 */

  /* ── Morning Ritual 三卡片竖排 ── */
  .ritual-grid { grid-template-columns: 1fr !important; gap: 10px; }

  /* ── Moon Ritual 日记输入框 ── */
  .moon-journal-input,
  #moon-ritual-textarea { font-size: 15px; } /* 防止iOS放大 */

  /* ── 21-Day Challenge 格子 ── */
  .streak-grid {
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 4px;
  }
  .streak-day { font-size: 11px; border-radius: 6px; }

  /* ── Meditate 居中 ── */
  .meditate-wrap { padding: 24px 20px 100px; margin: 0 auto; }
  .meditate-mode-row { flex-wrap: wrap; gap: 6px; }
  .meditate-mode-btn { flex: 1 1 calc(50% - 6px); font-size: 12px; }
  .meditate-duration-row { gap: 6px; }
  .meditate-circle-outer { width: 180px; height: 180px; }
  .meditate-circle { width: 130px; height: 130px; }

  /* ── Doctor Report modal ── */
  #doctor-report-modal > div {
    padding: 20px 16px !important;
    max-height: 92vh !important;
  }

  /* ── Share panel Settings区 ── */
  #panel-share .page > div[style*="border-top"] {
    margin-top: 20px;
    padding-top: 20px;
  }

  /* ── 分享卡下载按钮grid → 竖排 ── */
  #vela-share-card-modal div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ── 防止input/select iOS缩放（字号<16px会触发）── */
  input, select, textarea {
    font-size: 16px !important;
  }
  /* 小字号的input单独恢复视觉大小 */
  input.ptab, .ptab { font-size: 12px !important; }
}

/* ══════════════════════════════════════════
   手机端核心溢出修复 v3.50
   ══════════════════════════════════════════ */
@media (max-width: 767px) {



  /* 全局文本溢出保护 */
  .page, .card, .panel {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Health Insights文字限宽 */
  #panel-astro .page,
  #panel-today .page {
    overflow-x: hidden;
  }
  /* subnav需要横向滚动 */
  #panel-today .page .stars-mobile-subnav {
    overflow-x: auto !important;
    max-width: none !important;
  }
  #panel-today .page .stars-mobile-subnav .stars-mobile-tab {
    max-width: none !important;
    min-width: max-content !important;
  }

  /* Today Report文字不溢出 */
  #today-panel-inner * {
    max-width: 100%;
    word-break: break-word;
  }

  /* Stars首页大卡手机单列 */
  .stars-main-grid {
    grid-template-columns: 1fr;
  }

  /* 底部登录条不遮挡内容 */
  .page {
    padding-bottom: 100px;
  }

  /* "Something to Bring You Back"Amazon卡片 */
  .aff-card, [id*="amazon"], [class*="amazon"] {
    max-width: 100%;
    overflow: hidden;
  }
}

/* ══════════════════════════════════════════
   Stars手机端横向子导航
   ══════════════════════════════════════════ */
.stars-mobile-subnav {
  display: none; /* 桌面隐藏 */
}

@media (max-width: 767px) {
  .stars-mobile-subnav {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 0 16px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .stars-mobile-subnav::-webkit-scrollbar { display: none; }

  .stars-mobile-tab {
    flex-shrink: 0;
    padding: 7px 16px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.15);
    background: none;
    color: rgba(245,242,237,0.5);
    font-family: var(--fb);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
  }
  .stars-mobile-tab.active {
    background: rgba(196,163,90,0.15);
    border-color: rgba(196,163,90,0.5);
    color: var(--gold);
  }



  /* 修复所有溢出文字 */
  #panel-astro .page,
  #panel-astro .astro-panel-inner {
    overflow-x: hidden !important;
    max-width: 100%;
  }
  #panel-astro * {
    max-width: 100%;
    box-sizing: border-box;
  }
  .card {
    overflow: hidden;
  }
}

/* ══════════════════════════════════════════
   手机端核心修复 v3.53
   ══════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── 根本修复：所有panel内容不溢出 ── */
  .astro-panel-inner {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    padding: 20px 16px 100px !important;
  }
  .astro-panel-inner * {
    max-width: 100% !important;
    box-sizing: border-box !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  /* subnav需要横向滚动，解除父容器的overflow:hidden限制 */
  .astro-panel-inner .stars-mobile-subnav {
    overflow-x: auto !important;
    max-width: none !important;
  }
  .astro-panel-inner .stars-mobile-subnav .stars-mobile-tab {
    max-width: none !important;
    min-width: max-content !important;
  }



  /* ── Health Insights文字不溢出 ── */
  #panel-astro .card,
  #panel-astro [class*="insight"],
  #panel-astro [id*="insight"] {
    overflow: hidden !important;
    max-width: 100% !important;
  }
  #panel-astro p,
  #panel-astro div {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
  }

  /* ── Data Insights：两个按钮各占一半 ── */
  #panel-astro [style*="grid-template-columns: 1fr 1fr"],
  #panel-astro [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  #panel-astro [style*="grid-template-columns: 1fr 1fr"] button,
  #panel-astro [style*="grid-template-columns:1fr 1fr"] button {
    min-width: 0 !important;
    padding: 10px 8px !important;
    font-size: 11px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ── auth-banner固定在tab-bar上方，不占内容流 ── */
  #auth-banner {
    position: fixed !important;
    bottom: 64px !important; /* tab-bar高度 */
    left: 0 !important;
    right: 0 !important;
    z-index: 99 !important;
    padding: 8px 16px !important;
    font-size: 12px !important;
  }

  /* ── 底部留够空间：tab-bar(64) + auth-banner(~40) ── */
  .main .page {
    padding-bottom: 120px !important;
  }
}

/* ══════════════════════════════════════════
   planet-grid-v2 权威定义 v3.59（唯一权威，之前的全部删除）
   ══════════════════════════════════════════ */

/* 桌面端：2列 */
.planet-grid-v2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

/* 手机端：单列 */
@media (max-width: 767px) {
  .planet-grid-v2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }
  .planet-grid-v2 > div {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
  }
  .planet-grid-v2 > div > div:first-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
}

/* ══════════════════════════════════════════
   手机端.card padding修复 v3.57
   ══════════════════════════════════════════ */
@media (max-width: 767px) {
  .card {
    padding: 16px;
  }
}

/* ══════════════════════════════════════════
   手机端通用横向子导航 mobile-subnav v3.63
   桌面：隐藏（用sidebar代替）
   手机：横向滚动pill tabs
   ══════════════════════════════════════════ */
.mobile-subnav {
  display: none; /* 桌面隐藏 */
}

@media (max-width: 767px) {
  .mobile-subnav {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 0 14px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    /* 解除父容器overflow:hidden的裁切 */
    position: relative;
    z-index: 1;
  }
  .mobile-subnav::-webkit-scrollbar { display: none; }

  .mobile-subnav-tab {
    flex-shrink: 0;
    padding: 7px 16px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.15);
    background: none;
    color: rgba(245,242,237,0.5);
    font-family: var(--fb);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    max-width: none !important;
    min-width: max-content !important;
    box-sizing: border-box;
  }
  .mobile-subnav-tab.active {
    background: rgba(196,163,90,0.15);
    border-color: rgba(196,163,90,0.5);
    color: var(--gold);
  }

  /* 解除各panel容器overflow:hidden对subnav的裁切 */
  .page > .mobile-subnav,
  .astro-panel-inner > .mobile-subnav,
  .advisor-wrap > .mobile-subnav,
  .mood-wrap > .mobile-subnav,
  .challenge-wrap > .mobile-subnav,
  .meditate-wrap > .mobile-subnav {
    overflow-x: auto !important;
    max-width: none !important;
  }
}