/* ============================================================
   康宁鉴 · 公众版 — 设计 Token（按截图还原）
   配色：米白宣纸底 / 印章红 / 墨色文字 / 五行色
   ============================================================ */

:root {
  /* ── 背景色 ── */
  --paper: #f5f0e8;
  --paper-2: #ede5d8;
  --card: #faf7f2;
  --card-border: #e8e0d4;

  /* ── 文字色 ── */
  --ink: #3a3028;
  --ink-soft: #6b5d4f;
  --ink-faint: #9a8b7a;

  /* ── 印章红 ── */
  --seal: #c0392b;
  --seal-dark: #a03020;

  /* ── 五行色 ── */
  --wx-wood: #2d7a4f;
  --wx-fire: #c0392b;
  --wx-earth: #d4a03c;
  --wx-metal: #8a8578;
  --wx-water: #2c5f8a;

  /* ── 生克线 ── */
  --rel-sheng: #7ea38c;
  --rel-ke: #c96a56;

  /* ── 状态色 ── */
  --badge-strong-bg: #f7e0d4;
  --badge-strong-fg: #c14a3a;
  --badge-weak-bg: #dfe7ea;
  --badge-weak-fg: #3A5A78;
  --badge-mid-bg: #e3ece6;
  --badge-mid-fg: #3A7D5C;

  /* ── 圆角 / 投影 ── */
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 2px 12px rgba(60, 48, 36, 0.06);
  --shadow-sm: 0 1px 6px rgba(60, 48, 36, 0.04);

  /* ── 字体 ── */
  --font-serif: "Noto Serif SC", "Songti SC", "SimSun", "STSong", serif;
  --font-kai: "Kaiti SC", "STKaiti", "KaiTi", "FangSong", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-sans);
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse at 15% 0%, rgba(255, 255, 255, 0.4) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 100%, rgba(212, 160, 60, 0.06) 0%, transparent 50%);
  background-attachment: fixed;
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* 宣纸噪点纹理 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 页面主体容器 */
.page {
  position: relative;
  z-index: 1;
  max-width: 860px;
  margin: 0 auto;
  padding: 20px 16px 60px;
}

/* ─ 顶部定位声明 ── */
.position-banner {
  text-align: center;
  font-size: 11px;
  color: var(--seal);
  line-height: 1.6;
  padding: 8px 16px;
  margin-bottom: 16px;
}
.position-banner::before {
  content: "✦ ";
}

/* ── 页面标题区 ── */
.page-header {
  text-align: center;
  padding: 20px 0 30px;
  position: relative;
}
.page-header .cloud-left,
.page-header .cloud-right {
  position: absolute;
  top: 10px;
  width: 60px;
  height: 40px;
  opacity: 0.15;
}
.page-header .cloud-left { left: 10%; }
.page-header .cloud-right { right: 10%; }
.page-header h1 {
  font-family: var(--font-kai);
  font-size: 32px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 4px;
  margin-bottom: 8px;
}
.page-header .subtitle {
  font-size: 14px;
  color: var(--ink-soft);
  letter-spacing: 2px;
  margin-bottom: 6px;
}
.page-header .desc {
  font-size: 12px;
  color: var(--ink-faint);
}

/* ── 卡片 ─ */
.card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 20px 24px;
  margin-bottom: 16px;
}

/* ── 模块标题 ── */
.module-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.module-header .seal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--seal);
  color: #fff;
  font-family: var(--font-kai);
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}
.module-header .title-text {
  font-family: var(--font-kai);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 1px;
}
.module-header .title-en {
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 1px;
  margin-left: 4px;
}

/* ── 信息条 ── */
.info-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 16px;
}
.info-bar .info-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.info-bar .info-tag {
  display: inline-block;
  padding: 2px 8px;
  background: var(--badge-mid-bg);
  color: var(--badge-mid-fg);
  border-radius: 4px;
  font-size: 11px;
}

/* ── 按钮 ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  text-decoration: none;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--seal);
  color: #fff;
  box-shadow: 0 2px 8px rgba(192, 57, 43, 0.2);
}
.btn-primary:hover { background: var(--seal-dark); }

.btn-outline {
  background: transparent;
  border: 1.5px solid var(--card-border);
  color: var(--ink-soft);
}
.btn-outline:hover { border-color: var(--seal); color: var(--seal); }

.btn-ghost {
  background: var(--card);
  border: 1.5px solid var(--card-border);
  color: var(--ink-soft);
}

.btn-block {
  display: flex;
  width: 100%;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  font-size: 15px;
}

/* ── 输入控件 ── */
.input, select.input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius-sm);
  background: #fff;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink);
  transition: border-color 0.2s;
}
.input:focus {
  outline: none;
  border-color: var(--seal);
}
.input::placeholder { color: var(--ink-faint); }

label.field-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

/* ── 快捷示例按钮 ── */
.quick-btn {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  background: var(--card);
  font-size: 12px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.2s;
}
.quick-btn:hover {
  border-color: var(--seal);
  color: var(--seal);
}

/* ── 状态徽标 ── */
.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.6;
}
.badge-strong { background: var(--badge-strong-bg); color: var(--badge-strong-fg); }
.badge-weak { background: var(--badge-weak-bg); color: var(--badge-weak-fg); }
.badge-mid { background: var(--badge-mid-bg); color: var(--badge-mid-fg); }

/* ── 五行图例 ── */
.wx-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}
.wx-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--ink-soft);
}
.wx-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* ── 性情标签 ─ */
.trait-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.trait-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  background: var(--card);
  font-size: 13px;
  color: var(--ink);
}
.trait-tag::before {
  content: "●";
  font-size: 8px;
  color: var(--seal);
}

/* ── 节气横条 ── */
.season-slider {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.season-item {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.2s;
}
.season-item:hover { background: var(--paper-2); }
.season-item.active {
  background: var(--seal);
  color: #fff;
}

/* ── 节气详情 ── */
.season-detail-box {
  background: var(--paper-2);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-bottom: 16px;
}
.season-detail-box .sd-title {
  font-family: var(--font-kai);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}
.season-detail-box .sd-subtitle {
  font-size: 12px;
  color: var(--ink-faint);
}

/* ── 四列布局 ── */
.four-col {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.four-col-item {
  padding: 12px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  background: #fff;
}
.four-col-item .fc-title {
  font-size: 12px;
  color: var(--ink-faint);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.four-col-item .fc-content {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.6;
}
.four-col-item .fc-content ul {
  list-style: none;
  padding: 0;
}
.four-col-item .fc-content li::before {
  content: "• ";
  color: var(--ink-faint);
}

/* ── 食疗行 ── */
.food-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-soft);
  flex-wrap: wrap;
}
.food-row .food-label {
  font-weight: 500;
  color: var(--ink);
}
.food-tag {
  display: inline-block;
  padding: 2px 10px;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: var(--card);
  font-size: 12px;
  color: var(--ink-soft);
}

/* ── 生克图例 ── */
.sk-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  color: var(--ink-faint);
  margin-top: 12px;
}
.sk-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.sk-legend-line {
  width: 20px;
  height: 2px;
}
.sk-legend-line.sheng { background: var(--rel-sheng); }
.sk-legend-line.ke {
  background: var(--rel-ke);
  border-top: 2px dashed var(--rel-ke);
  height: 0;
}

/* ── 分享卡区域 ── */
.share-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 20px;
  align-items: start;
}
.share-preview {
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}
.share-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.share-actions .btn-block {
  border-radius: var(--radius-sm);
}
.share-note {
  font-size: 12px;
  color: var(--ink-faint);
  line-height: 1.6;
  margin-top: 8px;
}

/* ── Toast ── */
#toast {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: #fff;
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 13px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  z-index: 999;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── 页脚 ── */
.footer {
  text-align: center;
  padding: 30px 16px 20px;
  font-size: 12px;
  color: var(--ink-faint);
  line-height: 1.8;
}
.footer .footer-title {
  font-family: var(--font-kai);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}

/* ─ 响应式 ── */
@media (max-width: 640px) {
  .page { padding: 12px 10px 40px; }
  .card { padding: 16px; }
  .four-col { grid-template-columns: repeat(2, 1fr); }
  .share-layout { grid-template-columns: 1fr; }
  .page-header h1 { font-size: 26px; }
}