/* bazi.goldfx.xyz — 简洁现代风 */
:root {
  --bg: #faf9f6;
  --fg: #2c2c2c;
  --muted: #888;
  --border: #e5e2da;
  --accent: #8b5a2b;
  --accent-soft: #f3eee5;
  --ok: #1f7a3d;
  --warn: #b9461b;
  --wx-mu: #2a8c3f;
  --wx-huo: #c1352a;
  --wx-tu: #b5912b;
  --wx-jin: #8a8a8a;
  --wx-shui: #1f4d8e;
}

* { box-sizing: border-box }
body {
  margin: 0;
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--fg);
}

a { color: var(--accent); text-decoration: none }
a:hover { text-decoration: underline }

.nav {
  display: flex; justify-content: space-between; align-items: center;
  padding: .8rem 1.5rem; background: white; border-bottom: 1px solid var(--border);
}
.nav .brand a { font-size: 1.2rem; font-weight: 600; color: var(--accent) }
.nav .links a { margin-left: 1rem }
.nav .muted { color: var(--muted) }

.container { max-width: 1100px; margin: 1.2rem auto; padding: 0 1rem }
.footer { text-align: center; padding: 2rem 1rem; color: var(--muted); font-size: .85rem }

.card {
  background: white; border: 1px solid var(--border); border-radius: 8px;
  padding: 1.2rem 1.5rem; margin-bottom: 1rem;
}
.card h2 { margin-top: 0; color: var(--accent) }
.card h3 { color: var(--accent); border-bottom: 1px solid var(--border); padding-bottom: .3rem }

.muted { color: var(--muted) }
.small { font-size: .85rem }
.warn { color: var(--warn); font-weight: 500 }
.ok { color: var(--ok); font-weight: 500 }
.hl { color: var(--accent); font-weight: 600 }

.flash { padding: .6rem 1rem; border-radius: 6px; margin-bottom: 1rem }
.flash-error { background: #fbe9e3; color: var(--warn) }
.flash-warn { background: #fff7e6; color: #b9461b; border-left: 4px solid #b9461b }
.flash-ok { background: #e8f5e9; color: var(--ok); border-left: 4px solid var(--ok) }

/* 登录 */
.login-card { max-width: 380px; margin: 3rem auto }
.login-card label { display: block; margin: .8rem 0 }
.login-card input { width: 100%; padding: .5rem; border: 1px solid var(--border); border-radius: 4px; font-size: 1rem }
.login-card button { width: 100%; padding: .6rem; margin-top: .8rem; background: var(--accent); color: white; border: 0; border-radius: 4px; font-size: 1rem; cursor: pointer }

/* 排盘表单 */
.form-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; align-items: end }
.form-grid label { display: flex; flex-direction: column; font-size: .9rem; color: var(--muted) }
.form-grid input, .form-grid select { padding: .5rem; border: 1px solid var(--border); border-radius: 4px; font-size: 1rem; margin-top: .3rem }
.form-grid .full { grid-column: 1 / -1 }
button.primary { background: var(--accent); color: white; border: 0; padding: .6rem 1.2rem; border-radius: 4px; font-size: 1rem; cursor: pointer }
button.primary:hover { opacity: .9 }
button.danger { background: var(--warn); color: white; border: 0; padding: .4rem .8rem; border-radius: 4px; cursor: pointer; font-size: .85rem }
button:disabled { opacity: .5; cursor: not-allowed }
.help { padding: .5rem 1rem; font-size: .9rem }

/* 城市快捷 chip */
.city-quick { margin-top: .5rem }
.chip { background: var(--accent-soft); color: var(--accent); border: 1px solid transparent;
        padding: .25rem .7rem; border-radius: 99px; margin: .15rem; cursor: pointer; font-size: .85rem;
        text-decoration: none; display: inline-block }
.chip:hover { background: var(--accent); color: white; text-decoration: none }
.chip.active { background: var(--accent); color: white; border-color: var(--accent) }
.tag { background: var(--accent-soft); color: var(--accent); padding: .15rem .5rem;
       border-radius: 4px; font-size: .8rem; font-weight: 500 }
.group-chips { padding: .5rem 0 1rem; display: flex; flex-wrap: wrap }
.ganzhi-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: .5rem; align-items: end }
.ganzhi-grid input { font-size: 1.2rem; text-align: center; font-weight: 600 }
.edit-meta { margin-top: 1rem; padding: .5rem 0 }

/* 命盘四柱表 */
.bazi-table { width: 100%; border-collapse: collapse; margin: 1rem 0 }
.bazi-table th, .bazi-table td { padding: .6rem; border: 1px solid var(--border); text-align: center; vertical-align: middle }
.bazi-table thead th { background: var(--accent-soft); color: var(--accent) }
.bazi-table tbody th { background: #f5f3ec; color: var(--muted); width: 60px; font-weight: 500 }
.bazi-table .gan, .bazi-table .zhi { font-size: 1.4rem; font-weight: 600 }
.bazi-table small { display: block; font-size: .75rem; color: var(--muted); font-weight: 400 }

/* 五行配色 */
.wx-木 { color: var(--wx-mu) } .wx-火 { color: var(--wx-huo) }
.wx-土 { color: var(--wx-tu) } .wx-金 { color: var(--wx-jin) } .wx-水 { color: var(--wx-shui) }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem }
.grid-2 > div h3 { margin-top: 0 }

/* 五行得分条 */
.wx-bar { display: grid; grid-template-columns: 28px 1fr 100px; align-items: center; gap: .5rem; margin: .3rem 0 }
.wx-bar .label { font-weight: 600; text-align: center }
.wx-bar .bar { background: var(--accent-soft); height: 14px; border-radius: 4px; overflow: hidden }
.wx-bar .bar .fill { background: var(--accent); height: 100%; min-width: 1px }

/* 大运表 */
.dayun-table { width: 100%; border-collapse: collapse; margin: .5rem 0 }
.dayun-table th, .dayun-table td { padding: .4rem .6rem; border: 1px solid var(--border); text-align: center; font-size: .9rem }
.dayun-table thead { background: var(--accent-soft) }
.dayun-gz { font-weight: 600 }
tr.judg-大吉之运 { background: #e8f5e9 }
tr.judg-凶险之运 { background: #fce4ec }
tr.judg-凶运 { background: #fff3e0 }
tr.judg-吉运 { background: #f1f8e9 }

/* 神煞 */
.shensha-list { padding-left: 1rem; margin: .3rem 0 }
.shensha-list li { margin: .2rem 0; font-size: .9rem }

/* 历史 */
.history-table { width: 100%; border-collapse: collapse }
.history-table th, .history-table td { padding: .5rem .8rem; border-bottom: 1px solid var(--border); text-align: left }
.history-table thead { background: var(--accent-soft) }

/* AI 卡片 */
.ai-head { display: flex; justify-content: space-between; align-items: center }
.ai-content pre {
  background: var(--accent-soft); padding: 1rem; border-radius: 6px;
  white-space: pre-wrap; font-family: inherit; font-size: .95rem; line-height: 1.7;
}

.reading-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .5rem }
.strength-身旺, .strength-偏旺 { color: var(--ok) }
.strength-身弱, .strength-偏弱 { color: var(--warn) }
.strength-中和 { color: var(--accent) }

@media (max-width: 760px) {
  .form-grid { grid-template-columns: 1fr }
  .grid-2 { grid-template-columns: 1fr }
  .bazi-table .gan, .bazi-table .zhi { font-size: 1.1rem }
}