/* 知己识彼 Pro — 整体功能页美化版（深靛 × 金色，呼应落地页品牌） */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Arial', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  -webkit-text-size-adjust: 100%;
  background: #eef3f9;
}

/* 顶部导航条：深靛渐变底 + 金色标题，深底上清晰可读 */
.topbar {
  background: linear-gradient(135deg, #203a5e, #16283f);
  color: #fff;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
  position: relative;
  z-index: 2;
}
.topbar .logo { color: #eed18a; font-size: 18px; font-weight: 700; }
.topbar .user-tag { color: #ffd56a; font-size: 13px; }
.topbar a { color: #fff; text-decoration: none; margin-left: 15px; font-size: 14px; }
.topbar a:hover { color: #ffd35c; }

.container {
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 100vh;
}

/* 三大分区：柔和渐变层次，留白更从容 */
.top-section {
  flex: none;
  display: flex;
  overflow: hidden;
}
.zone-zhizhi {
  flex: none;
  width: 50%;
  background: linear-gradient(180deg, #f6f9ff 0%, #e9f0fb 100%);
  padding: 10px 14px 14px;
  box-sizing: border-box;
  overflow-y: auto;
}
.zone-shibie {
  flex: none;
  width: 50%;
  background: linear-gradient(180deg, #fdf8ef 0%, #f5ecde 100%);
  padding: 10px 14px 14px;
  box-sizing: border-box;
  overflow-y: auto;
}
.bottom-section {
  flex: none;
  background: linear-gradient(180deg, #eef5f6 0%, #e2edf0 100%);
  padding: 10px 14px 14px;
  box-sizing: border-box;
  overflow-y: auto;
}

/* 分区标题：深靛、字号清朗、下加金色分隔 */
h2 {
  margin: 2px 0 6px;
  font-size: 17px;
  color: #1b2f4c;
  letter-spacing: 0.02em;
  font-weight: 700;
  border-bottom: 2px solid #d4af37;
  padding-bottom: 6px;
}
h3 {
  margin: 5px 0 3px;
  font-size: 15px;
  color: #2c3e50;
  font-weight: 700;
}

label { font-size: 14px; color: #3a3f4a; }
input, button { margin: 3px 0; }

/* 输入控件：圆润、聚焦金色 */
input[type="date"], input[type="time"], input[type="text"], input[type="password"],
input[type="tel"], select {
  padding: 8px 10px;
  border: 1px solid #c9d2e0;
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
  color: #2c3e50;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus {
  border-color: #d4af37;
  box-shadow: 0 0 0 3px rgba(212,175,55,.18);
  outline: none;
}

/* 出生信息四控件统一宽高 */
#birthDate, #birthTime, #gender, #birthLocation {
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  line-height: 1.3;
  margin: 4px 0;
  vertical-align: middle;
}

/* 按钮：主行动渐变绿、圆角、投影 */
button {
  padding: 10px 18px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #07c160, #06ad56);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-right: 5px;
  box-shadow: 0 4px 12px rgba(7,193,96,.25);
  transition: transform .1s, box-shadow .15s, filter .15s;
}
button:hover {
  filter: brightness(1.04);
  box-shadow: 0 6px 16px rgba(7,193,96,.35);
  transform: translateY(-1px);
}
button:disabled { background: #9aa7b5; cursor: not-allowed; box-shadow: none; }

.time-hint { font-size: 13px; color: #6b7280; margin: 6px 0; }
.placeholder { color: #9aa5b1; font-size: 14px; text-align: center; padding: 24px 0; }

/* 设置面板 */
.settings-btn { cursor: pointer; font-size: 18px; float: right; }
.settings-panel {
  background: #fff;
  border: 1px solid #e3e8ef;
  border-radius: 12px;
  padding: 14px;
  margin-top: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.settings-panel h3 { margin-top: 0; color: #1b2f4c; }
.settings-panel input { width: calc(100% - 12px); }
#apiStatus { margin-left: 6px; font-size: 13px; color: #6b7280; }

/* 结果卡片：白底、圆角、金边点缀、柔和阴影 */
.result-card {
  background: #fff;
  border-radius: 12px;
  padding: 12px 14px;
  margin: 10px 0;
  border-left: 3px solid #d4af37;
  box-shadow: 0 4px 14px rgba(16,32,58,.08);
}
.result-card p { margin: 5px 0; font-size: 14px; line-height: 1.7; color: #3a3f4a; }
.result-card h3 {
  margin: 0 0 6px;
  font-size: 15px;
  color: #1b2f4c;
  border-bottom: 1px solid #eef1f5;
  padding-bottom: 5px;
}

.error { color: #d32f2f; font-weight: bold; }

/* 五行柱状图 */
.element-bars {
  background: #fff;
  border-radius: 12px;
  padding: 12px 14px;
  margin: 10px 0;
  box-shadow: 0 4px 14px rgba(16,32,58,.08);
}
.element-bars p { margin: 6px 0; font-size: 14px; color: #3a3f4a; }
.element-row { display: flex; align-items: center; margin: 6px 0; }
.element-label { width: 46px; font-size: 14px; color: #2c3e50; }
.element-bar-bg { flex: 1; height: 18px; background: #e6eaf1; border-radius: 9px; margin: 0 8px; overflow: hidden; }
.element-bar-fill { height: 100%; border-radius: 9px; transition: width .3s; }
.element-val { width: 36px; font-size: 13px; color: #6b7280; }

/* 处事区（行动/时间/额外）卡片 */
.action-grid { display: flex; gap: 12px; height: calc(100% - 30px); }
.action-main, .action-timeline, .action-extra {
  flex: 1;
  background: #fff;
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 4px 14px rgba(16,32,58,.08);
  overflow-y: auto;
}
.action-main p, .action-timeline p, .action-extra p { font-size: 14px; margin: 5px 0; line-height: 1.7; color: #3a3f4a; }
.action-timeline ul { margin: 5px 0; padding-left: 20px; }
.action-timeline li { font-size: 14px; margin: 2px 0; }

/* 输入框快捷场景胶囊 */
button[onclick^="fillIntent"] {
  background: #fff;
  color: #6b7280;
  border: 1px solid #d8dfe9;
  box-shadow: none;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 12px;
}
button[onclick^="fillIntent"]:hover {
  border-color: #d4af37;
  color: #1b2f4c;
  box-shadow: none;
  transform: none;
}

/* 模型搜索 */
.settings-panel select { width: 100%; padding: 6px; border: 1px solid #c9d2e0; border-radius: 8px; font-size: 13px; background: #fff; cursor: pointer; }
#modelSearch { padding: 8px 10px; border: 2px solid #8aa0c0; border-radius: 8px; font-size: 14px; width: calc(100% - 16px); }
#modelSearch:focus { border-color: #d4af37; outline: none; }
#modelStatus { display: block; margin: 3px 0; color: #6b7280; font-size: 13px; }

/* ========== 平板 ========== */
@media (max-width: 900px) {
  .zone-zhizhi, .zone-shibie, .bottom-section { padding: 12px 14px 14px; }
}

/* ========== 手机（竖屏） ========== */
@media (max-width: 600px) {
  .container { height: auto; min-height: 100vh; overflow-y: auto; }
  .top-section { flex-direction: column; flex: none; overflow: visible; }
  .zone-zhizhi, .zone-shibie, .bottom-section { flex: none; width: 100%; padding: 12px 14px; overflow: visible; }
  .action-grid { flex-direction: column; height: auto; }
  .action-main, .action-timeline, .action-extra { flex: none; width: 100%; }
  h2 { font-size: 19px; }
  h3 { font-size: 16px; }
  label { font-size: 15px; }
  .result-card p, .element-bars p, .action-main p, .action-timeline p, .action-extra p, .action-timeline li { font-size: 15px; line-height: 1.7; }
  input[type="date"], input[type="time"], input[type="text"], input[type="password"], input[type="tel"], select { font-size: 16px; padding: 10px 8px; }
  #birthDate, #birthTime, #gender, #birthLocation { height: 46px; }
  button { font-size: 16px; padding: 12px 18px; }
  #shibie-result, #qigua-result { min-width: 100% !important; }
  .result-card > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
}