/* xiaoliuren-fix.css - 小六壬 pan-common + 小成图统一风格 */

/* ===== 基础重置 ===== */
.preloader_area { display: none !important; }
body {
  padding-top: 0 !important;
  margin: 0 !important;
  background: #f0f2f5 !important;
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(180,170,140,0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(150,155,165,0.08) 0%, transparent 50%),
    linear-gradient(180deg, #f5f6f8 0%, #f0f2f5 100%) !important;
  font-family: 'PingFang SC', 'Microsoft YaHei', 'Noto Serif SC', 'STSong', serif !important;
}

/* ===== 顶部栏 ===== */
.topbar {
  background: linear-gradient(135deg, #ffffff 0%, #f7f8fa 50%, #ffffff 100%) !important;
  border-bottom: 1px solid #dde1e6 !important;
  padding: 0 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
  margin-bottom: 0 !important;
}
.topbar-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 24px !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}
.topbar-title {
  font-size: 20px !important;
  color: #8B6914 !important;
  letter-spacing: 6px !important;
  font-weight: normal !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.topbar-dates {
  display: flex !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}
.topbar-date-item {
  font-size: 12px !important;
  color: #666666 !important;
  white-space: nowrap !important;
}
.topbar-date-item em {
  color: #8B6914 !important;
  font-style: normal !important;
  margin-left: 4px !important;
}
.topbar-divider {
  width: 1px !important;
  height: 14px !important;
  background: #dde1e6 !important;
  flex-shrink: 0 !important;
}

/* ===== 主内容区 ===== */
.main-wrap {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 20px 16px 60px !important;
}

/* ===== 输入面板卡片化 ===== */
.input-section {
  background: #ffffff !important;
  border: 1px solid #dde1e6 !important;
  border-radius: 14px !important;
  padding: 20px 24px !important;
  margin-bottom: 24px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
}

/* ===== 模式标签栏 ===== */
.mode-tabs {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  margin-bottom: 16px !important;
  border-bottom: 1px solid #dde1e6 !important;
  padding-bottom: 12px !important;
  background: transparent !important;
  border-radius: 0 !important;
}
.mode-tab {
  padding: 6px 14px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  color: #666666 !important;
  font-size: 13px !important;
  transition: all 0.2s !important;
  user-select: none !important;
  border: 1px solid transparent !important;
  text-decoration: none !important;
  background: transparent !important;
  display: inline-block !important;
}
.mode-tab:hover {
  color: #333 !important;
  border-color: #dde1e6 !important;
}
.mode-tab.active {
  background: linear-gradient(135deg, #faf6eb, #f5edd6) !important;
  border-color: #8B6914 !important;
  color: #8B6914 !important;
}

/* xiaoliuren 旧的 .wrapper 模式切换按钮 → 统一为 mode-tabs */
.wrapper { display: flex !important; gap: 6px !important; background: transparent !important; border: none !important; border-radius: 0 !important; height: auto !important; margin: 0 !important; }
.wrapper .option { border: 1px solid transparent !important; background: transparent !important; border-radius: 6px !important; color: #666666 !important; cursor: pointer !important; font-size: 13px !important; padding: 6px 14px !important; margin: 0 !important; height: auto !important; width: auto !important; flex: 0 0 auto !important; }
.wrapper .option:hover { color: #333 !important; border-color: #dde1e6 !important; }

/* ===== 通用排盘按钮 ===== */
.lbut {
  background: linear-gradient(135deg, #8B6914, #a07d1c) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 10px 20px !important;
  font-size: 14px !important;
  cursor: pointer !important;
  letter-spacing: 2px !important;
  box-shadow: 0 2px 8px rgba(139,105,20,0.3) !important;
  text-align: center !important;
  line-height: 1.4 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  font-family: inherit !important;
}
.lbut:hover {
  background: linear-gradient(135deg, #a07d1c, #b88d28) !important;
  box-shadow: 0 3px 12px rgba(139,105,20,0.4) !important;
}

/* ===== 按钮行布局 ===== */
.plr .wrap {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
.plr .pinp {
  flex: 1 1 auto !important;
  min-width: 100px !important;
}

/* ===== 输入区 wrap ===== */
.pp .wrap {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
.pp .pinp {
  flex: 1 1 60px !important;
  min-width: 60px !important;
}
.pp .pinp select {
  width: 100% !important;
  border: 1px solid #dde1e6 !important;
  border-radius: 6px !important;
  padding: 8px 6px !important;
  font-size: 13px !important;
  background: #f7f8fa !important;
  font-family: inherit !important;
}

/* ===== 报数输入框 ===== */
.plr .pinp input[type="number"] {
  width: 100% !important;
  border: 1px solid #dde1e6 !important;
  border-radius: 6px !important;
  padding: 8px 10px !important;
  font-size: 14px !important;
  text-align: center !important;
  background: #f7f8fa !important;
  font-family: inherit !important;
}

/* ===== ipt 标签 ===== */
.ipt {
  background: rgba(139,105,20,0.08) !important;
  color: #8B6914 !important;
  border: 1px solid rgba(139,105,20,0.2) !important;
  border-radius: 6px !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  text-align: center !important;
  white-space: nowrap !important;
  font-weight: bold !important;
}
.ipt.plr {
  cursor: pointer !important;
}

/* ===== 排盘结果区 ===== */
#shower, #shower1, #shower2 {
  background: #ffffff !important;
  border: 1px solid #dde1e6 !important;
  border-radius: 14px !important;
  padding: 16px !important;
  margin-top: 16px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
}
#shower:empty, #shower1:empty, #shower2:empty { display: none !important; }

#shower table, #shower1 table, #shower2 table {
  border-collapse: collapse !important;
  width: 100% !important;
}
#shower th, #shower1 th, #shower2 th {
  border: 1px solid #999 !important;
  padding: 6px 4px !important;
  text-align: center !important;
  font-size: clamp(13px, 4.3vw, 16px) !important;
  background: linear-gradient(135deg, #faf6eb, #f5edd6) !important;
  color: #8B6914 !important;
}
#shower td, #shower1 td, #shower2 td {
  border: 1px solid #dde1e6 !important;
  padding: 6px 4px !important;
  text-align: center !important;
  font-size: clamp(12px, 4vw, 15px) !important;
}

/* ===== 底部说明表格 ===== */
.main-wrap > table {
  background: #ffffff !important;
  border: 1px solid #dde1e6 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  margin: 24px auto 0 !important;
  width: 100% !important;
  max-width: 1200px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
}
.main-wrap > table th {
  background: linear-gradient(135deg, #faf6eb, #f5edd6) !important;
  color: #8B6914 !important;
  font-size: clamp(14px, 4.5vw, 17px) !important;
  padding: 12px 8px !important;
  letter-spacing: 4px !important;
}
.main-wrap > table td {
  font-size: clamp(13px, 4.9vw, 16px) !important;
  line-height: 1.8 !important;
  color: #555 !important;
}
.main-wrap > table td[style*="text-align: left"],
.main-wrap > table td[style*="text-align:left"] {
  background: #fffef8 !important;
  padding: 16px !important;
}

/* ===== 五行颜色 ===== */
.wood { color: #228B22 !important; }
.fire { color: #FF0000 !important; }
.earth { color: #715a15 !important; }
.metal { color: #ef9113 !important; }
.water { color: #185fac !important; }

/* ===== 移动端适配 ===== */
@media (max-width: 768px) {
  .main-wrap { padding: 12px !important; }
  .input-section { padding: 16px !important; }
  .topbar-inner { padding: 10px 12px !important; }
  .topbar-title { font-size: 14px !important; letter-spacing: 3px !important; }
  .topbar-dates { gap: 6px !important; font-size: 11px !important; }
  .mode-tab { padding: 8px 10px !important; font-size: 12px !important; }
  .pp .wrap { gap: 6px !important; }
  .pp .pinp { flex: 1 1 50px !important; min-width: 50px !important; }
  .pp .pinp select { padding: 8px 4px !important; font-size: 12px !important; }
  .lbut { padding: 8px 12px !important; font-size: 12px !important; letter-spacing: 1px !important; }
  .plr .pinp { min-width: 80px !important; }
}