/* HD Buddy — 命理整合分析 */

.hd-buddy-app {
  max-width: 900px;
  margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, 'Noto Sans TC', sans-serif;
}

/* Form */
.hd-form {
  background: #fafafa;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  padding: 28px;
  margin-bottom: 32px;
}

.hd-form h3 {
  margin: 0 0 20px;
  font-size: 1.1rem;
  color: #333;
}

.hd-form-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.hd-form-row label {
  min-width: 80px;
  font-size: 0.9rem;
  color: #555;
  font-weight: 500;
}

.hd-form input[type="number"],
.hd-form select {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 0.95rem;
  width: auto;
}

.hd-form input[type="number"] { width: 90px; }

.hd-submit-btn {
  display: block;
  width: 100%;
  padding: 14px;
  margin-top: 20px;
  background: linear-gradient(135deg, #6c63ff, #9b59b6);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .2s;
}

.hd-submit-btn:hover { opacity: .9; }
.hd-submit-btn:disabled { opacity: .6; cursor: not-allowed; }

.hd-error { color: #e74c3c; font-size: .9rem; margin-top: 8px; }

/* Tabs */
.hd-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.hd-tab {
  padding: 8px 18px;
  border: 1px solid #ddd;
  border-radius: 20px;
  background: white;
  font-size: .88rem;
  cursor: pointer;
  transition: all .2s;
}

.hd-tab.active,
.hd-tab:hover {
  background: #6c63ff;
  color: white;
  border-color: #6c63ff;
}

/* Sections */
.hd-section { padding: 8px 0; }

.hd-section h4 {
  font-size: 1rem;
  color: #444;
  margin: 16px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid #eee;
}

/* Table */
.hd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
  margin: 8px 0 20px;
}

.hd-table th {
  background: #f0eeff;
  padding: 8px 10px;
  text-align: left;
  font-weight: 600;
  color: #444;
}

.hd-table td {
  padding: 7px 10px;
  border-bottom: 1px solid #f0f0f0;
}

.hd-table tr:hover td { background: #fafafa; }

/* Fields */
.hd-field {
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}

.hd-field strong {
  display: inline-block;
  min-width: 110px;
  color: #5a4fcf;
  font-size: .9rem;
}

.hd-field span { font-size: .92rem; color: #333; }

.hd-desc {
  font-size: .82rem;
  color: #777;
  margin: 4px 0 0 110px;
  line-height: 1.5;
}

/* Channel */
.hd-channel {
  font-size: .88rem;
  padding: 5px 0;
  color: #444;
  border-bottom: 1px solid #f8f8f8;
}

/* Synthesis */
.hd-synthesis { line-height: 1.8; color: #333; }
.hd-synthesis h2 { font-size: 1.15rem; color: #6c63ff; margin: 20px 0 8px; }
.hd-synthesis h3 { font-size: 1rem; color: #444; margin: 16px 0 6px; }
.hd-synthesis p  { margin: 0 0 12px; }
.hd-synthesis strong { color: #5a4fcf; }

/* Mobile */
@media (max-width: 600px) {
  .hd-form-row { gap: 6px; }
  .hd-form input[type="number"] { width: 70px; }
  .hd-table { font-size: .78rem; }
  .hd-table th, .hd-table td { padding: 5px 6px; }
}