/**
 * 飞星工具主页样式（设计稿 G1/G2/G3/G4/G5）
 *
 * 视觉与 me.css 米色调一致；ArchivePicker 已是全局样式不重写。
 */

.fs-page {
  max-width: 480px;
  margin: 0 auto;
  padding: 16px;
  padding-bottom: 80px; /* tabbar 56 + safe-area */
  background: #faf3e3;
  min-height: 100vh;
  min-height: 100dvh;
  color: #3a2e1f;
  font-family: var(--onboard-font-sans, -apple-system, "PingFang SC", sans-serif);
}

/* ============ header（archive 切换） ============ */
.fs-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0 14px;
}
.fs-header__title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.fs-header__archive {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fff;
  border: 1px solid #e3d4ae;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 13px;
  color: #3a2e1f;
  cursor: pointer;
}
.fs-header__archive::after { content: '▾'; opacity: 0.6; }

/* ============ "查看完整命盘" 卡 ============ */
.fs-mingpan-card {
  background: #fff;
  border: 1px solid #e3d4ae;
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}
.fs-mingpan-card__icon { font-size: 22px; }
.fs-mingpan-card__text { flex: 1; }
.fs-mingpan-card__title { font-size: 15px; font-weight: 600; }
.fs-mingpan-card__sub { font-size: 12px; color: #8b7a55; margin-top: 2px; }
.fs-mingpan-card__chevron { color: #8b7a55; font-size: 18px; }

/* ============ scope tab ============ */
.fs-tabs {
  display: flex;
  gap: 6px;
  background: #fff;
  border: 1px solid #e3d4ae;
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 14px;
}
.fs-tab {
  flex: 1;
  padding: 8px 0;
  border: 0;
  background: transparent;
  border-radius: 8px;
  font-size: 14px;
  color: #6e5d3f;
  cursor: pointer;
  font-family: inherit;
}
.fs-tab.is-active {
  background: #3a2e1f;
  color: #faf3e3;
  font-weight: 600;
}

/* ============ period strip ============ */
.fs-period {
  background: #fff;
  border: 1px solid #e3d4ae;
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 14px;
}

/* dayun / liuyue chip 列表 */
.fs-period__chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.fs-chip {
  border: 1px solid #e3d4ae;
  background: #fff;
  border-radius: 10px;
  padding: 8px 4px;
  font-size: 13px;
  text-align: center;
  cursor: pointer;
  color: #3a2e1f;
  font-family: inherit;
}
.fs-chip__label { font-weight: 600; }
.fs-chip__sub { font-size: 11px; color: #8b7a55; margin-top: 2px; }
.fs-chip.is-current { border-color: #b8924a; }
.fs-chip.is-selected { background: #3a2e1f; color: #faf3e3; border-color: #3a2e1f; }
.fs-chip.is-selected .fs-chip__sub { color: #d8c896; }

/* liunian 滚动窗口 */
.fs-period--liunian {
  display: flex;
  align-items: center;
  gap: 6px;
}
.fs-arrow {
  background: transparent;
  border: 1px solid #e3d4ae;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 16px;
  cursor: pointer;
  color: #3a2e1f;
  font-family: inherit;
}
.fs-arrow:disabled { opacity: 0.3; cursor: not-allowed; }
.fs-period--liunian .fs-period__chips {
  flex: 1;
  grid-template-columns: repeat(5, 1fr);
}

/* liuri 日历 */
.fs-period--liuri { padding: 12px; }
.fs-cal-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  gap: 8px;
}
.fs-cal-meta {
  font-size: 13px;
}
.fs-cal-toggle {
  display: inline-flex;
  border: 1px solid #d3c19a;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.fs-cal-toggle__btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 4px 12px;
  font-size: 12px;
  color: #6b5a3b;
  cursor: pointer;
  font-family: inherit;
}
.fs-cal-toggle__btn.is-active {
  background: #b8924a;
  color: #fff;
}

/* liuyue 强调"农历" */
.fs-period__meta {
  font-size: 11px;
  color: #8b7a55;
  padding: 4px 12px 0;
}
.fs-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.fs-cal-cell {
  aspect-ratio: 1;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 6px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #3a2e1f;
  font-family: inherit;
  overflow: hidden;
  line-height: 1;
}
.fs-cal-cell.is-empty { cursor: default; }
.fs-cal-cell.is-current { border-color: #b8924a; }
.fs-cal-cell.is-selected { background: #3a2e1f; color: #faf3e3; }
.fs-cal-head {
  font-size: 11px;
  color: #8b7a55;
  text-align: center;
  padding: 4px 0;
}

/* ============ 6 主题 pill ============ */
.fs-pills {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.fs-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  border: 1px solid #e3d4ae;
  border-radius: 12px;
  padding: 12px 6px;
  cursor: pointer;
  font-family: inherit;
  color: #3a2e1f;
}
.fs-pill__icon { font-size: 24px; line-height: 1; }
.fs-pill__label { font-size: 13px; margin-top: 4px; }
.fs-pill.is-active { background: #3a2e1f; color: #faf3e3; border-color: #3a2e1f; }

/* ============ active content（设计稿 G5） ============ */
.fs-content {
  background: #fff;
  border: 1px solid #e3d4ae;
  border-radius: 14px;
  padding: 16px;
}
.fs-content__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.fs-content__icon { font-size: 26px; }
.fs-content__name { font-size: 17px; font-weight: 700; }
.fs-content__rating {
  margin-left: auto;
  font-size: 13px;
  background: #f0e4c4;
  border-radius: 999px;
  padding: 4px 10px;
  color: #6e5d3f;
}
.fs-content__rating-sub { font-size: 12px; color: #8b7a55; margin-top: 4px; }
.fs-section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #f0e4c4;
}
.fs-section__title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #6e5d3f;
}
.fs-section__text { font-size: 14px; line-height: 1.6; }
.fs-advice-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 6px;
}
.fs-advice-item__icon {
  font-size: 13px;
  margin-top: 1px;
  flex-shrink: 0;
}
.fs-advice-item--good .fs-advice-item__icon { color: #4caf50; }
.fs-advice-item--warn .fs-advice-item__icon { color: #c84e3c; }
.fs-advice-item--neutral .fs-advice-item__icon { color: #8b7a55; }
.fs-cta {
  margin-top: 16px;
  width: 100%;
  background: #3a2e1f;
  color: #faf3e3;
  border: 0;
  border-radius: 10px;
  padding: 12px;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
}

/* ============ forecast 图模式（PR-7c） ============ */
/* 多图垂直 stack，每张图 1080×1728 等比；loading skeleton 占位防 layout shift */
.fs-forecast-images {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}
.fs-forecast-image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1080 / 1728;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #f0e4c4;
}
.fs-forecast-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.fs-forecast-image-skel {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #f5e9c8 0%, #faf3e3 50%, #f5e9c8 100%);
  background-size: 200% 100%;
  animation: fs-skel-shimmer 1.4s linear infinite;
}
@keyframes fs-skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.fs-forecast-image-wrap.is-error {
  background: #fff5f0;
  border-color: #f0c8b8;
}
.fs-forecast-image-err {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #c84e3c;
  font-size: 13px;
  padding: 16px;
  text-align: center;
}
.fs-forecast-images-loading {
  text-align: center;
  padding: 24px 12px;
  color: #8b7a55;
  font-size: 13px;
}
.fs-forecast-images-error {
  background: #fff5f0;
  border: 1px solid #f0c8b8;
  border-radius: 10px;
  padding: 14px 12px;
  font-size: 13px;
  color: #c84e3c;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.fs-forecast-retry {
  background: #3a2e1f;
  color: #faf3e3;
  border: 0;
  border-radius: 8px;
  padding: 6px 16px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}

/* ============ 状态/loading ============ */
.fs-empty,
.fs-loading {
  text-align: center;
  padding: 24px 12px;
  color: #8b7a55;
  font-size: 13px;
}
.fs-error {
  background: #fff5f0;
  border: 1px solid #f0c8b8;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  color: #c84e3c;
  margin-bottom: 10px;
}