* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif; background:#f8f8f8; color:#333; line-height:1.6; }
.container { max-width:720px; margin:0 auto; padding:15px; }

h1 { text-align:center; color:#c00; margin:20px 0; font-size:1.8rem; }

.date-select { background:#fff; padding:15px; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,0.1); margin-bottom:20px; text-align:center; }
.date-select select, .date-select button { padding:8px 12px; margin:5px; font-size:1rem; border:1px solid #ccc; border-radius:4px; }
.date-select button { background:#c00; color:white; border:none; cursor:pointer; }

.huanli-card { background:#fff; border-radius:8px; box-shadow:0 2px 12px rgba(0,0,0,0.1); overflow:hidden; }
.header { background:#c00; color:white; padding:20px; text-align:center; }
.header h2 { margin:0; font-size:1.6rem; }
.lunar { font-size:1.1rem; margin:8px 0; }
.ganzhi { font-size:0.95rem; opacity:0.9; }

.yiji { display:flex; background:#fff; padding:15px; border-bottom:1px solid #eee; }
.yiji > div { flex:1; text-align:center; }
.yi strong { color:#2e7d32; font-size:1.3rem; }
.ji strong { color:#d32f2f; font-size:1.3rem; }
.yiji span { display:block; margin-top:8px; font-size:1.05rem; color:#444; }

.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:#eee; }
.detail-grid > div { background:#fff; padding:12px; border-bottom:1px solid #eee; }
.detail-grid strong { color:#c00; display:block; margin-bottom:4px; }

.tip, .error { text-align:center; padding:30px; color:#777; }

@media (min-width: 768px) {
  .container { padding:30px; }
  .detail-grid { grid-template-columns:repeat(3,1fr); }
}