* { box-sizing: border-box; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: linear-gradient(135deg, #f4ecd8, #e8d5b7);
  margin: 0; padding: 24px;
  color: #2d2d2d;
}
.card {
  max-width: 760px; margin: 0 auto;
  background: #fff;
  padding: 32px 40px;
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.08);
}
h1 { margin-top: 0; color: #8b4513; }
.sub { color: #666; margin-top: -8px; }
.hint { font-size: 0.85em; color: #888; margin-top: 24px; }
.err, .warn {
  background: #fff3cd; border-left: 4px solid #d9a300;
  padding: 10px 14px; margin: 12px 0; border-radius: 4px;
}
.err { background: #ffe0e0; border-color: #d33; }

form label { display: block; margin: 14px 0; font-weight: 500; }
form input, form select {
  width: 100%; padding: 8px 10px; font-size: 15px;
  border: 1px solid #ccc; border-radius: 6px; margin-top: 4px;
}

/* 行内复选框/单选按钮（不占满宽度，放在文字前面） */
form label.inline {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 6px 16px 6px 0; font-weight: 500;
}
form input[type="checkbox"],
form input[type="radio"] {
  width: auto; padding: 0; margin: 0; vertical-align: middle;
}

/* 农历年月日时分等小数字输入 */
form label.num {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 6px 12px 6px 0; font-weight: 500;
}
form label.num input { width: 90px; margin-top: 0; }

/* 出生时间分组容器 */
fieldset.birth-block {
  border: 1px solid #e2d5b8; border-radius: 8px;
  padding: 12px 16px; margin: 14px 0; background: #fbf6ea;
}
fieldset.birth-block legend { padding: 0 6px; color: #8b4513; font-weight: 600; }
#solar-row, #lunar-row { margin-top: 8px; }
form button {
  background: #8b4513; color: #fff; border: 0;
  padding: 10px 24px; font-size: 16px; border-radius: 6px;
  cursor: pointer; margin-top: 12px;
}
form button:hover { background: #6b3410; }

.back { color: #8b4513; text-decoration: none; font-size: 14px; }
.back:hover { text-decoration: underline; }
.block { margin: 28px 0; }

table.bazi { width: 100%; border-collapse: collapse; text-align: center; }
table.bazi th, table.bazi td { border: 1px solid #ddd; padding: 12px; font-size: 18px; }
table.bazi th { background: #f7efe0; }
table.bazi small { color: #888; font-size: 0.6em; }

ul.wuxing { list-style: none; padding: 0; display: flex; gap: 12px; }
ul.wuxing li { background: #f4ecd8; padding: 6px 14px; border-radius: 6px; }

.el-金 { color: #b8860b; font-weight: bold; }
.el-木 { color: #228b22; font-weight: bold; }
.el-水 { color: #1e90ff; font-weight: bold; }
.el-火 { color: #dc143c; font-weight: bold; }
.el-土 { color: #8b4513; font-weight: bold; }

ol.names { padding-left: 24px; }
ol.names li { margin-bottom: 18px; padding: 12px; background: #faf5e8; border-radius: 8px; }
.name { font-size: 26px; font-weight: bold; letter-spacing: 4px; color: #5a2d0c; }
.meta { color: #999; font-size: 0.85em; margin: 2px 0 6px; }
.chars { font-size: 0.92em; color: #444; }
.chars .ch { display: inline-block; margin-right: 16px; }
.chars b { font-size: 1.4em; margin-right: 4px; }
.reasons { color: #777; font-size: 0.85em; margin-top: 4px; }

.page-indicator { color: #999; font-weight: normal; font-size: 0.55em; margin-left: 10px; }
.refresh-form { display: inline-block; margin-top: 8px; }
.refresh-btn {
  background: #faf5e8; color: #8b4513; border: 1px solid #d3b88c;
  padding: 8px 20px; font-size: 14px; border-radius: 6px; cursor: pointer;
}
.refresh-btn:hover { background: #f4ecd8; }

.score-pill {
  display: inline-block; background: #8b4513; color: #fff;
  padding: 2px 10px; border-radius: 12px; font-weight: 600; font-size: 0.95em;
}
.score-pill small { font-size: 0.75em; opacity: 0.85; }
.score-pill.big { font-size: 1.6em; padding: 6px 18px; vertical-align: middle; }

.top-nav { display: flex; gap: 14px; margin-bottom: 12px; border-bottom: 1px solid #ead8b5; padding-bottom: 8px; }
.top-nav a {
  color: #8b4513; text-decoration: none; font-size: 15px; padding: 4px 12px;
  border-radius: 6px;
}
.top-nav a:hover { background: #faf5e8; }
.top-nav a.active { background: #8b4513; color: #fff; }

.row-2 { display: flex; gap: 16px; }
.row-2 > label { flex: 1; }

.grade-pill {
  display: inline-block; padding: 4px 14px; border-radius: 8px;
  font-weight: 700; font-size: 1.1em; margin-left: 10px;
}
.grade-A { background: #c8e6c9; color: #2e7d32; }
.grade-B { background: #fff9c4; color: #b8860b; }
.grade-C { background: #ffe0b2; color: #ef6c00; }
.grade-D, .grade-E { background: #ffcdd2; color: #c62828; }
.grade-desc { color: #666; margin-top: 4px; }

.name-breakdown { display: flex; gap: 12px; flex-wrap: wrap; }
.ch-card {
  background: #faf5e8; border-radius: 8px; padding: 12px 16px;
  text-align: center; min-width: 90px;
}
.ch-big { font-size: 2.4em; font-weight: bold; color: #5a2d0c; line-height: 1; }
.ch-tag { margin: 4px 0; }
.ch-tag.surname { color: #888; font-size: 0.85em; }
.ch-meaning { font-size: 0.8em; color: #666; margin-top: 4px; }
.warn-inline { color: #c62828; font-size: 0.85em; }

.hl-list { margin: 8px 0; }
.hl-item { padding: 6px 12px; margin: 4px 0; border-radius: 6px; }
.hl-item.ok { background: #e8f5e9; color: #2e7d32; }
.hl-item.miss { background: #fff3e0; color: #ef6c00; }

td .ji, .ji { color: #2e7d32; font-weight: 600; }
td .xiong, .xiong { color: #c62828; font-weight: 600; }

details {
  background: #faf5e8; border-radius: 8px;
  padding: 10px 16px; margin: 10px 0;
}
details summary {
  cursor: pointer; color: #8b4513; font-size: 1.05em;
  padding: 4px 0; outline: none;
}
details summary b { font-weight: 600; }
.explain { margin: 10px 0; color: #555; line-height: 1.7; }
.explain ul { padding-left: 22px; margin: 8px 0; }
.explain table.explain-table {
  width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 0.92em;
}
.explain table.explain-table th, .explain table.explain-table td {
  border: 1px solid #e2d5b8; padding: 8px 10px; text-align: left;
}
.explain table.explain-table th { background: #f4ecd8; color: #8b4513; }
.explain .quote {
  background: #fff; padding: 10px 14px; border-left: 4px solid #8b4513;
  margin: 8px 0; font-size: 1.02em;
}
.miss-tag {
  background: #ffe0e0; color: #c62828;
  padding: 0 6px; border-radius: 4px; font-size: 0.85em;
}
.strong-tag {
  background: #fff3cd; color: #b8860b;
  padding: 0 6px; border-radius: 4px; font-size: 0.85em;
}

/* ===== 定价页 ===== */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 20px 0;
}
@media (max-width: 700px) { .pricing-grid { grid-template-columns: 1fr; } }
.pricing-card {
  position: relative;
  background: #faf5e8;
  border: 2px solid #e2d5b8;
  border-radius: 12px;
  padding: 28px 24px;
  text-align: center;
}
.pricing-highlight {
  border-color: #8b4513;
  background: #fff8eb;
  box-shadow: 0 8px 24px rgba(139, 69, 19, 0.15);
}
.pricing-badge {
  position: absolute; top: -12px; right: 18px;
  background: #8b4513; color: #fff;
  padding: 4px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
}
.pricing-tier { color: #888; font-size: 14px; }
.pricing-price {
  font-size: 42px; font-weight: 700; color: #8b4513;
  margin: 10px 0 16px;
}
.pricing-features {
  list-style: none; padding: 0; margin: 0 0 20px;
  text-align: left;
}
.pricing-features li {
  padding: 6px 0; color: #555; font-size: 14px;
}
.pricing-btn {
  background: #fff;
  border: 1px solid #8b4513;
  color: #8b4513;
  padding: 12px 24px; border-radius: 8px;
  font-size: 15px; font-weight: 500;
  cursor: pointer; width: 100%;
}
.pricing-btn-primary { background: #8b4513; color: #fff; }
.pricing-btn:hover { background: #6b3410; color: #fff; }

/* ===== 解锁报告页 ===== */
.report-header { margin-bottom: 20px; }
.report-header h1 { margin: 8px 0; }
.report-meta { color: #999; font-size: 14px; }
.paid-badge {
  display: inline-block;
  background: #c8e6c9; color: #2e7d32;
  padding: 4px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 600;
}

.name-deep {
  background: #faf5e8;
  border-radius: 10px;
  padding: 16px 20px;
  margin: 14px 0;
}
.name-deep-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 10px;
}
.name-deep-name {
  font-size: 24px; font-weight: bold;
  color: #5a2d0c; letter-spacing: 3px;
}
.name-deep-chars { margin: 8px 0; }
.name-deep-meaning, .name-deep-classic, .name-deep-suitable {
  margin: 6px 0; font-size: 14px; color: #555;
}
.name-deep-notes { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.name-deep-notes .hl-item { display: inline; margin: 0; padding: 4px 10px; font-size: 0.85em; }

/* ===== 预览的付费转化 CTA ===== */
.paywall-cta {
  margin: 20px 0;
  background: linear-gradient(135deg, #fff8eb, #faf5e8);
  border: 2px solid #d4af37;
  border-radius: 12px;
  padding: 24px;
  text-align: center;
}
.paywall-cta h3 {
  margin: 0 0 8px;
  color: #8b4513;
  font-size: 20px;
}
.paywall-cta p {
  color: #6b5840;
  font-size: 14px;
  margin: 6px 0 16px;
}
.paywall-cta .cta {
  background: #8b4513;
  font-size: 16px;
  padding: 12px 32px;
}
.paywall-list {
  display: inline-block;
  text-align: left;
  margin: 12px 0;
  font-size: 13px;
  color: #6b5840;
}
.paywall-list li { padding: 3px 0; }

/* ===== 管理面板 ===== */
.admin-toggles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 12px 0;
}
@media (max-width: 700px) { .admin-toggles { grid-template-columns: 1fr; } }
.admin-toggle-card {
  background: #faf5e8;
  border-radius: 10px;
  padding: 16px 18px;
}
.admin-toggle-title {
  font-weight: 600;
  margin-bottom: 12px;
  color: #5a2d0c;
  display: flex; align-items: center; gap: 10px;
}
.admin-state {
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}
.admin-state.on { background: #c8e6c9; color: #2e7d32; }
.admin-state.off { background: #ffe0b2; color: #ef6c00; }

/* ===== 限时免费横幅 ===== */
.free-banner {
  background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
  border: 1px solid #81c784;
  border-radius: 10px;
  padding: 14px 20px;
  margin: 14px 0 20px;
  color: #1b5e20;
  font-size: 14px;
  display: flex; align-items: center; gap: 12px;
}
.free-tag {
  background: #2e7d32; color: #fff;
  padding: 3px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
  letter-spacing: 1px;
}