/* ==================== 全局样式 ==================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  min-height: 100vh;
  color: #e0d5c1;
  padding: 20px;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
}

/* ==================== 头部 ==================== */
.header {
  text-align: center;
  padding: 30px 0 20px;
}

.header h1 {
  font-size: 2.5em;
  color: #f0d78c;
  text-shadow: 0 2px 10px rgba(240, 215, 140, 0.3);
  letter-spacing: 4px;
  margin-bottom: 6px;
}

.header .subtitle {
  font-size: 1em;
  color: #9a8c6c;
  letter-spacing: 2px;
}

/* ==================== 输入面板 ==================== */
.input-panel {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(240, 215, 140, 0.2);
  border-radius: 16px;
  padding: 30px;
  margin-bottom: 30px;
  backdrop-filter: blur(10px);
}

.input-panel h3 {
  color: #f0d78c;
  margin-bottom: 20px;
  font-size: 1.2em;
  letter-spacing: 2px;
  border-bottom: 1px solid rgba(240, 215, 140, 0.2);
  padding-bottom: 10px;
}

.form-row {
  display: flex;
  gap: 20px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.form-row-second {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(240, 215, 140, 0.1);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 0.85em;
  color: #9a8c6c;
  letter-spacing: 1px;
}

.form-group input,
.form-group select {
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid rgba(240, 215, 140, 0.3);
  background: rgba(0, 0, 0, 0.3);
  color: #f0d78c;
  font-size: 1em;
  font-family: inherit;
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
  min-width: 100px;
}

.form-group input:focus,
.form-group select:focus {
  border-color: #f0d78c;
  box-shadow: 0 0 10px rgba(240, 215, 140, 0.2);
}

.form-group-check {
  justify-content: center;
}

.form-group-check label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: #f0d78c;
  font-size: 0.9em;
  letter-spacing: 1px;
}

.form-group-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #c9a84c;
  cursor: pointer;
}

/* ==================== 农历日期切换 ==================== */
.date-type-toggle .dt-opt {
  user-select: none;
  transition: all 0.2s;
}
.date-type-toggle .dt-opt:hover {
  background: rgba(240,215,140,0.08) !important;
  color: #d0b870 !important;
}

#lunarDateInput select {
  -webkit-appearance: none;
  text-align: center;
  cursor: pointer;
}
#lunarDateInput input[type="number"] {
  -moz-appearance: textfield;
}
#lunarDateInput input[type="number"]::-webkit-inner-spin-button,
#lunarDateInput input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ==================== 相面板 示例说明 ==================== */
.xiang-guide {
  margin-bottom: 16px;
  border: 1px solid rgba(240,215,140,0.15);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(240,215,140,0.03);
}
.xiang-guide summary {
  padding: 10px 16px;
  cursor: pointer;
  color: #d4a84c;
  font-size: 0.9em;
  font-weight: 600;
  letter-spacing: 1px;
  user-select: none;
  list-style: none;
}
.xiang-guide summary::-webkit-details-marker { display: none; }
.xiang-guide summary:hover { background: rgba(240,215,140,0.05); }
.xiang-guide[open] summary { border-bottom: 1px solid rgba(240,215,140,0.1); }

.xiang-guide-body {
  padding: 14px 18px;
  color: #b0a080;
  font-size: 0.82em;
  line-height: 1.8;
}
.xiang-guide-body p { margin: 6px 0; }
.xiang-guide-body strong { color: #d4a84c; }
.xiang-guide-body pre {
  background: #111122;
  color: #c0b080;
  padding: 12px;
  border-radius: 8px;
  font-size: 0.75em;
  line-height: 1.4;
  overflow-x: auto;
  white-space: pre;
  font-family: 'Courier New', monospace;
  margin: 8px 0;
}
.xiang-guide-body ul { margin: 6px 0; padding-left: 18px; }
.xiang-guide-body li { margin: 2px 0; }

.xiang-guide-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 10px 0;
}
.xiang-guide-card {
  flex: 1;
  min-width: 240px;
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(240,215,140,0.1);
  border-radius: 8px;
  padding: 12px 14px;
}
.xiang-guide-card h5 { color: #d4a84c; margin: 0 0 8px; font-size: 0.9em; }

.xiang-demo-box {
  margin: 12px 0;
  padding: 12px 14px;
  border: 1px dashed rgba(240,215,140,0.2);
  border-radius: 8px;
  background: rgba(240,215,140,0.025);
}
.xiang-demo-box h5 {
  color: #8bc34a;
  font-size: 0.82em;
  margin: 0 0 4px;
  letter-spacing: 1px;
}

.xiang-svg {
  overflow: hidden;
  max-width: 100%;
  height: auto;
}

/* ==================== 手相 CSS 网格示意图 ==================== */
.hand-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 6px 0;
  font-size: 0.78em;
  text-align: center;
}
.hand-finger-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 2px;
}
.hand-finger {
  background: rgba(240,215,140,0.06);
  border: 1px solid rgba(240,215,140,0.15);
  border-radius: 4px 4px 0 0;
  padding: 8px 2px 10px;
}
.hand-finger span { color: #d4a84c; display: block; }
.hand-palm {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 2px;
  min-height: 80px;
}
.hand-thumb-area {
  background: rgba(240,215,140,0.06);
  border: 1px solid rgba(240,215,140,0.12);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px;
}
.hand-thumb-area span { color: #d4a84c; }
.hand-thumb-area small { color: #777; font-size: 0.75em; }
.hand-center {
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
  padding: 4px 6px;
  background: rgba(240,215,140,0.04);
  border: 1px dashed rgba(240,215,140,0.1);
  border-radius: 4px;
}
.hand-line {
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.85em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hand-line small { font-size: 0.7em; color: #777; }
.hand-line-heart { color: #6cb86c; border-left: 3px solid #6cb86c; background: rgba(108,184,108,0.06); }
.hand-line-head { color: #5b9bd5; border-left: 3px solid #5b9bd5; background: rgba(91,155,213,0.06); }
.hand-line-life { color: #e06050; border-left: 3px solid #e06050; background: rgba(224,96,80,0.06); }
.hand-edge {
  background: rgba(240,215,140,0.04);
  border: 1px solid rgba(240,215,140,0.1);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888;
}
.hand-hill-row {
  margin-bottom: 0;
}
.hand-hill-row .hand-hill,
.hand-finger-row .hand-hill {
  background: rgba(212,168,76,0.06);
  border: 1px solid rgba(212,168,76,0.12);
  border-radius: 4px;
  padding: 6px 2px;
}
.hand-hill { color: #d4a84c; }
.hand-hill small { display: block; color: #777; font-size: 0.7em; margin-top: 1px; }
.hand-hill-venus, .hand-hill-mars, .hand-hill-moon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.hand-hill-row-bottom {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
}
.hand-hill-row-bottom .hand-hill {
  background: rgba(212,168,76,0.06);
  border: 1px solid rgba(212,168,76,0.12);
  border-radius: 4px;
  padding: 6px;
}
.hand-wrist {
  background: rgba(240,215,140,0.04);
  border: 1px solid rgba(240,215,140,0.1);
  border-radius: 0 0 4px 4px;
  padding: 6px;
  color: #888;
}

/* ==================== 面相 CSS 网格示意图 ==================== */
.face-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 6px auto;
  max-width: 320px;
}
.face-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2px;
}
.face-cell {
  padding: 8px 4px;
  text-align: center;
  background: rgba(240,215,140,0.04);
  border: 1px solid rgba(240,215,140,0.08);
  border-radius: 4px;
  color: #ccc;
  font-size: 0.78em;
  line-height: 1.4;
}
.face-cell small {
  display: block;
  color: #777;
  font-size: 0.7em;
  margin-top: 1px;
}
.face-center {
  background: rgba(212,168,76,0.08);
  border-color: rgba(212,168,76,0.2);
  color: #d4a84c;
}
.face-top .face-cell { border-radius: 4px 4px 0 0; }
.face-bottom .face-cell { border-radius: 0 0 4px 4px; }
.face-nose { color: #d4a84c; }
.face-eye .face-cell { font-size: 1.1em; padding: 4px; }

/* 风水九宫示例表格 */
.xfs-demo-table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  font-size: 0.85em;
  margin: 6px 0;
}
.xfs-demo-table td, .xfs-demo-table th {
  border: 1px solid rgba(240,215,140,0.2);
  padding: 6px 8px;
  color: #b0a080;
}
.xfs-demo-table th { background: rgba(240,215,140,0.08); color: #d4a84c; font-weight: 600; }

.hint-text {
  color: #7a7c60;
  font-size: 0.75em;
  max-width: 260px;
  line-height: 1.5;
}

/* ==================== 精确时间输入 ==================== */
.time-input-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.time-num {
  width: 60px !important;
  min-width: 60px !important;
  text-align: center;
  padding: 10px 6px !important;
}

.time-sep {
  font-size: 1.2em;
  color: #f0d78c;
  font-weight: bold;
}

.derived-shichen {
  margin-left: 12px;
  padding: 4px 12px;
  border-radius: 12px;
  background: rgba(240, 215, 140, 0.12);
  color: #c9a84c;
  font-size: 0.8em;
  white-space: nowrap;
  letter-spacing: 1px;
}

/* 移除 number input 的 spinner */
.time-num::-webkit-inner-spin-button,
.time-num::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.time-num {
  -moz-appearance: textfield;
}

.form-group select option {
  background: #1a1a2e;
  color: #e0d5c1;
}

.btn {
  padding: 10px 28px;
  border-radius: 8px;
  border: 1px solid #f0d78c;
  background: linear-gradient(135deg, rgba(240, 215, 140, 0.2), rgba(240, 215, 140, 0.05));
  color: #f0d78c;
  font-size: 1em;
  font-family: inherit;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.3s;
  white-space: nowrap;
}

.btn:hover {
  background: rgba(240, 215, 140, 0.3);
  box-shadow: 0 0 20px rgba(240, 215, 140, 0.3);
  transform: translateY(-1px);
}

.btn-primary {
  background: linear-gradient(135deg, #c9a84c, #a0842c);
  border-color: #c9a84c;
  color: #1a1a2e;
  font-weight: bold;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #d9b85c, #b0943c);
  box-shadow: 0 0 25px rgba(201, 168, 76, 0.5);
}

/* ==================== 八字信息条 ==================== */
.bazi-bar {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 30px;
  padding: 15px 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(240, 215, 140, 0.15);
}

.bazi-item {
  text-align: center;
  min-width: 70px;
}

.bazi-item .label {
  font-size: 0.75em;
  color: #9a8c6c;
  margin-bottom: 4px;
}

.bazi-item .value {
  font-size: 1.3em;
  color: #f0d78c;
  font-weight: bold;
  letter-spacing: 2px;
}

.bazi-item .ganzhi {
  font-size: 1.1em;
  color: #e0d5c1;
}

/* ==================== 命盘核心 ==================== */

.chart-container {
  position: relative;
  margin: 0 auto 30px;
  width: 100%;
  max-width: 680px;
}

/* 4x4 网格布局 */
.chart-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 6px;
  aspect-ratio: 1;
}

/* 中心留空（第2行第2-3列和第3行第2-3列为空 → 中间4个格子） */
.chart-grid .center-empty {
  grid-row: 2 / 4;
  grid-column: 2 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  border: 1px dashed rgba(240, 215, 140, 0.15);
}

.center-info {
  text-align: center;
  color: #f0d78c;
  padding: 10px;
}

.center-info .center-label {
  font-size: 0.7em;
  color: #9a8c6c;
  letter-spacing: 1px;
}

.center-info .center-name {
  font-size: 1.8em;
  font-weight: bold;
  margin: 6px 0;
  letter-spacing: 2px;
  transition: color 0.15s;
}
.center-name:hover {
  color: #ffcc88 !important;
}

.center-info .center-bureau {
  font-size: 0.9em;
  color: #c9a84c;
  margin-top: 4px;
  transition: color 0.15s;
}
.center-bureau:hover {
  color: #ffcc88 !important;
  text-decoration: underline;
  text-decoration-color: rgba(201, 168, 76, 0.4);
  text-underline-offset: 3px;
}

.center-info .center-info-item {
  font-size: 0.75em;
  color: #9a8c6c;
  margin-top: 4px;
}
.center-info-item:hover {
  color: #d4a84c !important;
  text-decoration: underline;
  text-decoration-color: rgba(212, 168, 76, 0.3);
  text-underline-offset: 3px;
}
.center-label:hover {
  color: #f0d78c !important;
}

/* 每个宫格 */
.palace-cell {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(240, 215, 140, 0.15);
  border-radius: 8px;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  transition: all 0.3s;
  overflow: hidden;
  min-height: 0;
  cursor: pointer;
}

.palace-cell:hover {
  border-color: rgba(240, 215, 140, 0.5);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 15px rgba(240, 215, 140, 0.15);
}

.palace-cell.ming-gong {
  border-color: rgba(255, 100, 100, 0.5);
  background: rgba(255, 100, 100, 0.08);
}

.palace-cell.shen-gong {
  border-color: rgba(100, 180, 255, 0.5);
  background: rgba(100, 180, 255, 0.08);
}

/* 宫位标题 */
.palace-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}

.palace-name {
  font-size: 0.9em;
  font-weight: bold;
  color: #f0d78c;
  letter-spacing: 1px;
}

.palace-ganzhi {
  font-size: 0.7em;
  color: #9a8c6c;
}

.palace-badge {
  font-size: 0.6em;
  padding: 1px 5px;
  border-radius: 10px;
  letter-spacing: 1px;
}

.palace-badge.ming {
  background: rgba(255, 100, 100, 0.3);
  color: #ff8888;
}

.palace-badge.shen {
  background: rgba(100, 180, 255, 0.3);
  color: #88bbff;
}

.palace-badge.laiyin {
  background: rgba(212, 168, 76, 0.3);
  color: #d4a84c;
}

.palace-cell.laiyin-gong {
  border-color: rgba(212, 168, 76, 0.4) !important;
}

/* 星曜列表 */
.star-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.star-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7em;
  line-height: 1.4;
}

.star-item.main-star {
  color: #f0d78c;
  font-weight: bold;
  font-size: 0.75em;
}

.star-item.aux-star {
  color: #b0c0d0;
}

.star-item.minor-star {
  color: rgba(180, 180, 200, 0.5);
  font-size: 0.65em;
}

.shensha-line {
  font-size: 0.55em;
  color: rgba(180, 180, 200, 0.35);
  margin-top: 2px;
}

.star-brightness {
  font-size: 0.75em;
  padding: 0 3px;
  border-radius: 3px;
}

.star-brightness.miao { color: #ff6666; }
.star-brightness.wang { color: #ff9966; }
.star-brightness.de { color: #ffcc66; }
.star-brightness.li { color: #cccccc; }
.star-brightness.ping { color: #999999; }
.star-brightness.bu { color: #666666; }
.star-brightness.xian { color: #444444; }

.sihua-badge {
  font-size: 0.65em;
  padding: 0 3px;
  border-radius: 3px;
  letter-spacing: 1px;
}

.sihua-badge.lu { background: rgba(100, 255, 100, 0.3); color: #88ff88; }
.sihua-badge.quan { background: rgba(255, 200, 100, 0.3); color: #ffcc66; }
.sihua-badge.ke { background: rgba(100, 200, 255, 0.3); color: #88ccff; }
.sihua-badge.ji { background: rgba(150, 100, 255, 0.3); color: #aa88ff; }

/* ==================== 详情面板 ==================== */
.detail-panel {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(240, 215, 140, 0.15);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 20px;
}

.detail-panel h3 {
  color: #f0d78c;
  margin-bottom: 16px;
  letter-spacing: 2px;
  border-bottom: 1px solid rgba(240, 215, 140, 0.2);
  padding-bottom: 8px;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  font-size: 0.9em;
}

.detail-item .d-label {
  color: #9a8c6c;
}

.detail-item .d-value {
  color: #f0d78c;
  font-weight: bold;
}

/* ==================== AI 解读面板 ==================== */
.detail-actions {
  margin-top: 16px;
  text-align: center;
}

.btn-ai {
  border-color: rgba(160, 140, 220, 0.5);
  color: #b0a0e0;
  background: linear-gradient(135deg, rgba(140, 120, 200, 0.15), rgba(100, 80, 180, 0.05));
  font-size: 0.95em;
  padding: 12px 32px;
  border-radius: 12px;
  letter-spacing: 1px;
}

.btn-ai:hover {
  background: rgba(140, 120, 200, 0.25);
  box-shadow: 0 0 22px rgba(140, 120, 200, 0.3);
  border-color: rgba(160, 140, 220, 0.7);
  transform: translateY(-1px);
}

.btn-ai-active {
  background: rgba(140, 120, 200, 0.3) !important;
  border-color: rgba(160, 140, 220, 0.8) !important;
}

.ai-analysis-container {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(240, 215, 140, 0.12);
  animation: aiSlideIn 0.3s ease;
}

@keyframes aiSlideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.ai-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.ai-header h3 {
  margin-bottom: 0;
  border-bottom: none;
  padding-bottom: 0;
  color: #b0a0e0;
  font-size: 1.1em;
}

.ai-badge {
  font-size: 0.65em;
  padding: 2px 10px;
  border-radius: 10px;
  background: rgba(140, 120, 200, 0.15);
  color: #9a8acc;
  letter-spacing: 1px;
  border: 1px solid rgba(140, 120, 200, 0.2);
}

.ai-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ai-block {
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(240, 215, 140, 0.08);
  border-radius: 10px;
  border-left: 3px solid rgba(160, 140, 220, 0.4);
  animation: aiBlockFadeIn 0.4s ease both;
}

@keyframes aiBlockFadeIn {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}

.ai-block-title {
  font-size: 0.9em;
  font-weight: bold;
  color: #c9b8e8;
  margin-bottom: 8px;
  letter-spacing: 1px;
}

.ai-block-text {
  font-size: 0.85em;
  color: #c0c0c8;
  line-height: 1.75;
  white-space: pre-line;
}

.ai-disclaimer {
  margin-top: 8px;
  padding: 12px 16px;
  font-size: 0.7em;
  color: #6a6c5c;
  text-align: center;
  border-top: 1px solid rgba(240, 215, 140, 0.08);
  line-height: 1.6;
}

/* ==================== 五术标签栏 ==================== */
.wushu-tab-bar {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  padding: 6px;
  background: rgba(255,255,255,0.03);
  border-radius: 28px;
  border: 1px solid rgba(240,215,140,0.12);
}

.wushu-tab {
  padding: 10px 28px;
  border-radius: 22px;
  border: 1px solid transparent;
  background: transparent;
  color: #9a8c6c;
  font-size: 1em;
  font-family: inherit;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.25s;
}

.wushu-tab:hover {
  color: #d0c090;
  background: rgba(255,255,255,0.04);
}

.wushu-tab.active {
  background: linear-gradient(135deg, rgba(240,215,140,0.2), rgba(240,215,140,0.05));
  color: #f0d78c;
  border-color: #c9a84c;
  box-shadow: 0 0 16px rgba(201,168,76,0.2);
}

.wushu-panel { display: none; }
.wushu-panel.active { display: block; }

/* ==================== 五术子标签栏 ==================== */
.wushu-sub-tabs {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(240,215,140,0.08);
}
.ws-tab {
  padding: 6px 16px;
  border-radius: 16px;
  border: 1px solid rgba(240,215,140,0.15);
  background: transparent;
  color: #8a8c7a;
  font-size: 0.82em;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 1px;
}
.ws-tab:hover { border-color: rgba(240,215,140,0.4); color: #b0a080; }
.ws-tab.active { background: rgba(240,215,140,0.12); color: #f0d78c; border-color: rgba(240,215,140,0.4); }
.ws-content { display: none; }
.ws-content.active { display: block; }

/* 保留兼容旧版样式 */
.tab-bar { display: none; }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ==================== 星盘布局 ==================== */
.astro-layout {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  margin-bottom: 30px;
}

.astro-left {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.astro-wheel-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  width: 100%;
  max-width: 680px;
}

.astro-legend-text {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 0.72em;
  color: #9a8c6c;
  margin-top: 10px;
  padding: 0 10px;
}

.astro-right {
  width: 100%;
  max-width: 720px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

.astro-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(240, 215, 140, 0.12);
  border-radius: 12px;
  padding: 16px;
}

.astro-card h4 {
  color: #d0c090;
  font-size: 0.9em;
  margin-bottom: 12px;
  letter-spacing: 1px;
  border-bottom: 1px solid rgba(240, 215, 140, 0.1);
  padding-bottom: 8px;
}

.planet-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  font-size: 0.8em;
  flex-wrap: wrap;
  transition: background 0.15s;
}
.planet-row.clickable:hover {
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
}
.planet-row:last-child { border-bottom: none; }
.planet-row.asc-row,
.planet-row.axis-row { border-top: 1px solid rgba(255,255,255,0.06); margin-top: 4px; padding-top: 8px; }

.pl-symbol { font-size: 1em; width: 22px; text-align: center; font-weight: bold; flex-shrink: 0; }
.pl-name { color: #c0c0c8; min-width: 55px; flex-shrink: 0; }
.pl-info { color: #f0d78c; font-weight: bold; font-size: 0.95em; }
.pl-info-sm { color: #7a7c68; font-size: 0.75em; }

.planet-interp {
  font-size: 0.7em;
  color: #9a9c88;
  line-height: 1.5;
  padding: 2px 8px 8px 30px;
  border-bottom: 1px solid rgba(255,255,255,0.02);
}

.planet-section-title {
  font-size: 0.72em;
  color: #8a8c7a;
  letter-spacing: 2px;
  padding: 10px 8px 6px;
  border-top: 1px solid rgba(240,215,140,0.1);
  margin-top: 4px;
}

.aspect-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 2px 10px;
  font-size: 0.76em;
  border-left: 3px solid;
  border-radius: 0 6px 6px 0;
}
.asp-symbol { font-size: 1.1em; width: 18px; text-align: center; flex-shrink: 0; }
.asp-planets { color: #e0d5c1; flex: 1; }
.asp-orb { color: #6a6c5c; font-size: 0.65em; }
.aspect-interp {
  font-size: 0.68em;
  color: #8a8c78;
  line-height: 1.5;
  padding: 2px 8px 6px 24px;
  margin-bottom: 3px;
  border-bottom: 1px solid rgba(255,255,255,0.02);
}
.aspect-empty { color: #5a5c4a; font-size: 0.8em; padding: 12px; text-align: center; }

/* ---- 宫位含星 ---- */
.house-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  font-size: 0.76em;
  border-bottom: 1px solid rgba(255,255,255,0.02);
  transition: background 0.15s;
}
.house-row.clickable:hover {
  background: rgba(255,255,255,0.04);
  border-radius: 4px;
}
.house-row.has-planet { border-left: 2px solid rgba(240,215,140,0.3); }
.hr-num { color: #6a6c5a; font-size: 0.85em; font-weight: bold; width: 20px; text-align: center; flex-shrink: 0; }
.hr-name { color: #c9a84c; font-weight: bold; min-width: 70px; }
.hr-label { color: #e0d5c1; flex: 1; }
.hr-planets { font-size: 1.1em; letter-spacing: 2px; flex-shrink: 0; }

/* ==================== 流年/流月导航 ==================== */
.br-flow-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(240,215,140,0.1);
  border-radius: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.br-flow-label {
  font-size: 0.8em;
  color: #c9a84c;
  letter-spacing: 2px;
  margin-right: 8px;
}
.br-flow-btn {
  padding: 4px 10px;
  border-radius: 12px;
  border: 1px solid rgba(240,215,140,0.2);
  background: rgba(0,0,0,0.2);
  color: #9a8c6c;
  font-size: 0.72em;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.br-flow-btn:hover {
  border-color: #c9a84c;
  color: #f0d78c;
  background: rgba(201,168,76,0.1);
}
.br-flow-year, .br-flow-month {
  color: #f0d78c;
  font-size: 0.9em;
  font-weight: bold;
  letter-spacing: 1px;
  min-width: 50px;
  text-align: center;
}
.br-flow-reset {
  border-color: rgba(160,200,140,0.3);
  color: #8ab87a;
  margin-left: 4px;
}
.br-flow-reset:hover {
  border-color: #8ab87a;
  background: rgba(138,184,122,0.1);
  color: #9fcf8f;
}

/* ---- 八字四柱详表 ---- */
.br-pillars-table {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(240,215,140,0.1);
  border-radius: 10px;
  overflow-x: auto;
  padding: 4px;
}
.br-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8em;
}
.br-table th {
  color: #8a8c7a;
  font-weight: normal;
  font-size: 0.75em;
  letter-spacing: 1px;
  padding: 8px 6px;
  border-bottom: 1px solid rgba(240,215,140,0.1);
  white-space: nowrap;
}
.br-table td {
  color: #c0c0c8;
  padding: 8px 6px;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  white-space: nowrap;
}
.brt-label { font-weight: bold; color: #f0d78c !important; letter-spacing: 1px; }
.brt-gan { font-weight: bold; color: #e0d5c1 !important; font-size: 1.1em; }
.brt-ss { color: #c9a84c !important; font-weight: bold; }
.brt-najia { color: #b0a0d0 !important; font-size: 0.85em; }
.brt-canggan { color: #9a9c88 !important; font-size: 0.75em; max-width: 120px; }
.brt-xunkong { color: #a06060 !important; font-size: 0.8em; }

/* ==================== 八字解读面板 ==================== */
.bazi-reading-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 30px;
}

.br-placeholder {
  text-align: center;
  padding: 60px 20px;
  color: #6a6c5c;
  font-size: 0.9em;
}

.br-pillars {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.br-pillar {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(240,215,140,0.15);
  border-radius: 10px;
  padding: 12px 16px;
  text-align: center;
  min-width: 80px;
}

.brp-label { display: block; font-size: 0.65em; color: #8a8c7a; margin-bottom: 4px; letter-spacing: 1px; }
.brp-ganzhi { display: block; font-size: 1.2em; color: #f0d78c; font-weight: bold; letter-spacing: 2px; margin-bottom: 4px; }
.brp-shishen { display: block; font-size: 0.7em; color: #c9a84c; }

.br-wuxing {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(240,215,140,0.1);
  border-radius: 10px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.brw-bar-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brw-label { width: 24px; font-size: 0.75em; color: #b0b0b8; text-align: center; }
.brw-bar {
  flex: 1;
  height: 10px;
  border-radius: 5px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.brw-fill { display: block; height: 100%; border-radius: 5px; transition: width 0.5s ease; min-width: 2px; }
.brw-val { width: 24px; font-size: 0.7em; color: #7a7c6c; text-align: center; }

.br-block {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(240,215,140,0.08);
  border-radius: 10px;
  padding: 16px 18px;
  border-left: 3px solid rgba(201,168,76,0.3);
}

.brb-title {
  font-size: 0.95em;
  font-weight: bold;
  color: #f0d78c;
  margin-bottom: 10px;
  letter-spacing: 1px;
}

.brb-icon { margin-right: 4px; }

.brb-text {
  font-size: 0.82em;
  color: #bcbcbc;
  line-height: 1.8;
}

.br-disclaimer {
  margin-top: 8px;
  padding: 12px 16px;
  font-size: 0.7em;
  color: #6a6c5c;
  text-align: center;
  border-top: 1px solid rgba(240,215,140,0.08);
}

/* ---- 大运时间线 ---- */
.dayun-timeline {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dy-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
}
.dy-step:hover {
  background: rgba(240,215,140,0.06);
}
.dy-bar-wrap {
  width: 80px;
  height: 6px;
  border-radius: 3px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
  flex-shrink: 0;
}
.dy-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease;
  min-width: 2px;
}
.dy-label {
  flex: 1;
  font-size: 0.78em;
  color: #e0d5c1;
  letter-spacing: 1px;
}
.dy-ss {
  font-size: 0.72em;
  color: #c9a84c;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 8px;
  background: rgba(201,168,76,0.1);
}

/* 大运详情弹出 */
.dayun-detail {
  margin-top: 10px;
  padding: 12px 16px;
  border: 1px solid rgba(240,215,140,0.15);
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  animation: dySlideIn 0.2s ease;
}
@keyframes dySlideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.dy-detail-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.dy-detail-age {
  font-size: 1.1em;
  font-weight: bold;
  color: #f0d78c;
}
.dy-detail-label {
  font-size: 0.95em;
  font-weight: bold;
  letter-spacing: 1px;
}
.dy-detail-body {
  font-size: 0.78em;
  color: #c0c0c8;
  line-height: 1.7;
}
.dy-detail-body div {
  padding: 2px 0;
}

/* ---- 星盘格局 ---- */
.pattern-item {
  padding: 8px 10px 8px 12px;
  margin-bottom: 6px;
  font-size: 0.76em;
  border-left: 3px solid;
  border-radius: 0 6px 6px 0;
  background: rgba(255,255,255,0.02);
}
.pattern-item:last-child { margin-bottom: 0; }
.ptn-name { display: block; color: #f0d78c; font-weight: bold; margin-bottom: 2px; }
.ptn-desc { display: block; color: #9a9c88; line-height: 1.5; }
.pattern-empty { color: #5a5c4a; font-size: 0.8em; padding: 8px; text-align: center; }

/* ---- 元素分布 ---- */
.element-dist { display: flex; flex-direction: column; gap: 6px; }
.elem-wrap { display: flex; align-items: center; gap: 8px; }
.elem-label { width: 20px; font-size: 0.75em; color: #b0b0b8; text-align: center; }
.elem-bar { flex: 1; height: 8px; border-radius: 4px; background: rgba(255,255,255,0.06); overflow: hidden; }
.elem-fill { display: block; height: 100%; border-radius: 4px; transition: width 0.5s ease; min-width: 3px; }
.elem-val { width: 20px; font-size: 0.7em; color: #7a7c6c; text-align: center; }

/* ---- 星盘点击弹窗 ---- */
.astro-info-popup {
  position: fixed;
  z-index: 10002;
  background: #1a1f2e;
  border: 1px solid rgba(200,180,140,0.4);
  border-radius: 12px;
  max-width: 340px;
  min-width: 240px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.65);
  animation: popupFadeIn 0.18s ease;
}
.aip-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(200,180,140,0.2);
}
.aip-icon {
  font-size: 1.3em;
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}
.aip-title {
  flex: 1;
  font-size: 1em;
  font-weight: bold;
  color: #f0d78c;
  letter-spacing: 1px;
}
.aip-close {
  background: none;
  border: none;
  color: rgba(200,180,140,0.45);
  font-size: 1.1em;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}
.aip-close:hover { color: #e0c88c; }
.aip-body {
  padding: 12px 16px;
  font-size: 0.8em;
  color: #bcbcbc;
  line-height: 1.7;
}
.aip-body b { color: #e0d5c1; }
.aip-footer {
  padding: 8px 16px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.aip-tag {
  font-size: 0.65em;
  padding: 2px 8px;
  border-radius: 8px;
  background: rgba(200,180,140,0.1);
  color: #d4a84c;
  border: 1px solid rgba(200,180,140,0.2);
}
.aip-tag.planet { border-color: rgba(255,180,100,0.3); color: #f0b860; }
.aip-tag.house  { border-color: rgba(150,200,255,0.3); color: #88bbff; }
.aip-tag.sign   { border-color: rgba(200,160,220,0.3); color: #c0a0e0; }
.aip-tag.axis   { border-color: rgba(255,140,140,0.3); color: #ff8888; }

/* SVG 内可点击元素视觉提示 */
.astro-wheel-container svg .clickable:hover {
  cursor: pointer;
  filter: brightness(1.4) drop-shadow(0 0 6px rgba(240,220,160,0.5));
}

/* ---- 大运时间线 ---- */
.dayun-timeline {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0;
}
.dy-step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78em;
}
.dy-bar-wrap {
  width: 60px;
  height: 6px;
  border-radius: 3px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
  flex-shrink: 0;
}
.dy-fill { height: 100%; border-radius: 3px; display: block; transition: width 0.5s ease; }
.dy-label { color: #f0d78c; font-weight: bold; min-width: 120px; letter-spacing: 1px; flex-shrink: 0; }
.dy-ss { color: #c9a84c; font-size: 0.85em; }

/* ==================== 图例 ==================== */
.legend {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 10px;
  font-size: 0.8em;
  color: #9a8c6c;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.legend-dot.main { background: #f0d78c; }
.legend-dot.aux { background: #b0c0d0; }
.legend-dot.ming { background: rgba(255, 100, 100, 0.5); }
.legend-dot.shen { background: rgba(100, 180, 255, 0.5); }

/* ==================== 四化星标记 ==================== */
.sihua-badge {
  display: inline-block;
  padding: 1px 5px;
  margin-left: 3px;
  border-radius: 4px;
  font-size: 0.65em;
  font-weight: bold;
  letter-spacing: 0;
  vertical-align: middle;
}

.sihua-badge.lu {
  background: rgba(80, 180, 80, 0.3);
  color: #6fcf6f;
}

.sihua-badge.quan {
  background: rgba(200, 140, 60, 0.3);
  color: #e8a850;
}

.sihua-badge.ke {
  background: rgba(80, 140, 200, 0.3);
  color: #6fa8dc;
}

.sihua-badge.ji {
  background: rgba(180, 80, 120, 0.3);
  color: #d47a9a;
}

.sihua-badge.centrifugal {
  /* 离心自化↓ - 暗示能量外散 */
}

.sihua-badge.centripetal {
  /* 向心自化↑ - 暗示能量汇聚 */
  font-style: italic;
}

/* ==================== 保存按钮 ==================== */
.btn-save {
  border-color: #6aac7d;
  color: #6aac7d;
  background: linear-gradient(135deg, rgba(106, 172, 125, 0.15), rgba(106, 172, 125, 0.05));
}

.btn-save:hover {
  background: rgba(106, 172, 125, 0.25);
  box-shadow: 0 0 18px rgba(106, 172, 125, 0.35);
}

.btn-saved {
  border-color: #6aac7d !important;
  color: #fff !important;
  background: #3a7c4d !important;
  transition: all 0.3s;
}

.btn-sm {
  padding: 4px 10px;
  font-size: 0.8em;
  border-radius: 6px;
  letter-spacing: 0;
}

/* ==================== 命例库浮动按钮 ==================== */
.btn-float-cases {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid rgba(240, 215, 140, 0.5);
  background: rgba(26, 26, 46, 0.85);
  color: #f0d78c;
  font-size: 1.4em;
  cursor: pointer;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  z-index: 100;
  transition: all 0.25s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-float-cases:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(240, 215, 140, 0.2);
  border-color: #c9a84c;
}

.btn-float-cases::after {
  content: attr(data-count);
  position: absolute;
  top: -6px;
  right: -6px;
  background: #c9a84c;
  color: #1a1a2e;
  font-size: 0.55em;
  font-weight: bold;
  min-width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 10px;
  text-align: center;
  padding: 0 5px;
  display: none;
}

.btn-float-cases[data-count]::after {
  display: block;
}

/* ==================== 命例库侧栏 ==================== */
.cases-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 380px;
  max-width: 100vw;
  height: 100vh;
  background: rgba(10, 10, 25, 0.95);
  border-left: 1px solid rgba(240, 215, 140, 0.2);
  backdrop-filter: blur(16px);
  z-index: 200;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: -4px 0 30px rgba(0, 0, 0, 0.6);
}

.cases-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(240, 215, 140, 0.15);
  flex-shrink: 0;
}

.cases-header h3 {
  flex: 1;
  color: #f0d78c;
  font-size: 1.15em;
  letter-spacing: 2px;
}

.cases-count {
  color: #7a7c60;
  font-size: 0.8em;
}

.cases-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
}

.cases-empty {
  text-align: center;
  padding: 60px 20px;
  color: #6a6c50;
  line-height: 2;
}

.cases-empty small {
  font-size: 0.8em;
  color: #5a5c40;
}

.case-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(240, 215, 140, 0.1);
  border-radius: 10px;
  transition: all 0.2s;
  cursor: default;
}

.case-card:hover {
  border-color: rgba(240, 215, 140, 0.3);
  background: rgba(255, 255, 255, 0.07);
}

.case-main {
  flex: 1;
  cursor: pointer;
  min-width: 0;
}

.case-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}

.case-date {
  color: #f0d78c;
  font-size: 0.85em;
  font-weight: bold;
}

.case-gender {
  color: #c9a84c;
  font-size: 0.75em;
  padding: 1px 8px;
  border: 1px solid rgba(201, 168, 76, 0.3);
  border-radius: 8px;
}

.case-tag {
  color: #6aac7d;
  font-size: 0.7em;
  padding: 1px 6px;
  border: 1px solid rgba(106, 172, 125, 0.3);
  border-radius: 6px;
}

.case-mid {
  font-size: 0.8em;
  margin-bottom: 2px;
}

.case-bazi {
  color: #e0d5c1;
  font-weight: bold;
  letter-spacing: 1px;
}

.case-chart {
  color: #9a8c6c;
}

.case-bot {
  font-size: 0.72em;
  color: #7a7c60;
}

.case-lunar {
  color: #8a8c72;
}

.btn-del-case {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: rgba(180, 80, 80, 0.15);
  color: #a06060;
  font-size: 0.7em;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-del-case:hover {
  background: rgba(200, 60, 60, 0.6);
  color: #fff;
}

/* ==================== 命例名称 ==================== */
.case-name {
  font-size: 0.95em;
  font-weight: bold;
  color: #f0d78c;
  letter-spacing: 1px;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==================== 命例标签 ==================== */
.case-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.case-tag-chip {
  padding: 2px 8px;
  font-size: 0.65em;
  color: #6aac7d;
  border: 1px solid rgba(106, 172, 125, 0.3);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
}

.case-tag-chip:hover {
  background: rgba(106, 172, 125, 0.15);
  border-color: #6aac7d;
}

/* ==================== 编辑按钮 ==================== */
.case-edit-btn {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: rgba(200, 180, 100, 0.12);
  color: #9a8c6c;
  font-size: 0.8em;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 2px;
}

.case-edit-btn:hover {
  background: rgba(200, 180, 100, 0.3);
  color: #f0d78c;
}

/* ==================== 标签筛选栏 ==================== */
.cases-tags-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 8px 16px;
  border-bottom: 1px solid rgba(240, 215, 140, 0.1);
  flex-shrink: 0;
}

.filter-tag {
  padding: 4px 12px;
  font-size: 0.72em;
  color: #9a8c6c;
  border: 1px solid rgba(154, 140, 108, 0.25);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.filter-tag:hover {
  color: #c9a84c;
  border-color: rgba(201, 168, 76, 0.4);
}

.filter-tag.active {
  color: #1a1a2e;
  background: #c9a84c;
  border-color: #c9a84c;
  font-weight: bold;
}

/* ==================== 保存对话框 ==================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-box {
  width: 400px;
  max-width: 100%;
  background: rgba(20, 20, 45, 0.95);
  border: 1px solid rgba(240, 215, 140, 0.25);
  border-radius: 16px;
  padding: 28px 24px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
}

.modal-box h3 {
  color: #f0d78c;
  font-size: 1.1em;
  letter-spacing: 2px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(240, 215, 140, 0.15);
  padding-bottom: 10px;
}

.modal-field {
  margin-bottom: 16px;
}

.modal-field label {
  display: block;
  color: #9a8c6c;
  font-size: 0.8em;
  margin-bottom: 8px;
  letter-spacing: 1px;
}

.modal-field input[type="text"] {
  width: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid rgba(240, 215, 140, 0.3);
  background: rgba(0, 0, 0, 0.35);
  color: #f0d78c;
  font-size: 0.95em;
  font-family: inherit;
  outline: none;
  transition: border-color 0.3s;
}

.modal-field input[type="text"]:focus {
  border-color: #c9a84c;
}

.tag-presets {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.tag-chip-preset {
  padding: 4px 12px;
  font-size: 0.75em;
  color: #e0d5c1;
  border: 1px solid rgba(224, 213, 193, 0.25);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s;
}

.tag-chip-preset:hover {
  color: #f0d78c;
  border-color: #c9a84c;
  background: rgba(201, 168, 76, 0.1);
}

.modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 24px;
}

.modal-actions .btn {
  padding: 8px 24px;
  font-size: 0.9em;
}

/* ========== 星曜百科弹窗 ========== */
.star-popup {
  position: fixed;
  z-index: 10001;
  background: #1a1f2e;
  border: 1px solid rgba(200, 180, 140, 0.4);
  border-radius: 10px;
  padding: 0;
  max-width: 320px;
  min-width: 240px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  animation: popupFadeIn 0.15s ease;
}
@keyframes popupFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.star-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(200, 180, 140, 0.2);
}
.star-popup-name {
  font-size: 1.1em;
  font-weight: bold;
  color: #e0c88c;
  letter-spacing: 1px;
}
.star-popup-close {
  background: none;
  border: none;
  color: rgba(200, 180, 140, 0.5);
  font-size: 1.1em;
  cursor: pointer;
  padding: 0 2px;
}
.star-popup-close:hover { color: #e0c88c; }

.star-popup-body {
  padding: 10px 14px 12px;
}
.sp-props {
  font-size: 0.7em;
  color: #aaa;
  line-height: 1.6;
  margin-bottom: 8px;
}
.sp-props b { color: #ccc; }
.sp-category {
  background: rgba(200, 180, 140, 0.15);
  color: #d4a84c;
  padding: 1px 6px;
  border-radius: 4px;
}
.sp-trait {
  color: #88bbff;
}
.sp-detail {
  font-size: 0.78em;
  color: #bcbcbc;
  line-height: 1.65;
  margin-bottom: 10px;
}
.sp-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.sp-kw-tag {
  font-size: 0.65em;
  background: rgba(200, 180, 140, 0.1);
  color: #d4a84c;
  padding: 2px 7px;
  border-radius: 8px;
  border: 1px solid rgba(200, 180, 140, 0.2);
}

/* 星名可点击的视觉提示 */
.star-item-name {
  cursor: pointer;
  transition: color 0.15s;
}
.star-item-name:hover {
  color: #e0c88c;
  text-decoration: underline;
  text-decoration-color: rgba(224, 200, 140, 0.3);
  text-underline-offset: 3px;
}

/* 宫位名称可点击提示 */
.palace-name {
  cursor: pointer;
  transition: color 0.15s;
}
.palace-name:hover {
  color: #c9a84c;
  text-decoration: underline;
  text-decoration-color: rgba(201, 168, 76, 0.4);
  text-underline-offset: 3px;
}

/* ==================== 功能全览按钮 ==================== */
.btn-features {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 18px;
  border-radius: 20px;
  border: 1px solid rgba(240, 215, 140, 0.35);
  background: rgba(240, 215, 140, 0.06);
  color: #c9a84c;
  font-size: 0.85em;
  font-family: inherit;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.3s;
}
.btn-features:hover {
  background: rgba(240, 215, 140, 0.18);
  border-color: #f0d78c;
  color: #f0d78c;
  box-shadow: 0 0 16px rgba(240, 215, 140, 0.2);
}

/* ==================== 简繁切换按钮 ==================== */
.btn-lang {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid rgba(140, 180, 220, 0.35);
  background: rgba(140, 180, 220, 0.06);
  color: #8cb4dc;
  font-size: 0.85em;
  font-family: inherit;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s;
  margin-left: 8px;
}
.btn-lang:hover {
  background: rgba(140, 180, 220, 0.18);
  border-color: #8cb4dc;
  color: #b0d0f0;
  box-shadow: 0 0 14px rgba(140, 180, 220, 0.2);
}

/* ==================== 功能全览面板 ==================== */
.feature-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.feature-panel {
  width: min(800px, 92vw);
  max-height: 88vh;
  background: linear-gradient(160deg, #1a1a2e 0%, #16213e 100%);
  border: 1px solid rgba(240, 215, 140, 0.25);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 12px 60px rgba(0, 0, 0, 0.6);
}
.feature-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px 0;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.feature-header h3 {
  color: #f0d78c;
  font-size: 1.3em;
  letter-spacing: 2px;
}
.feature-subtitle {
  flex: 1;
  color: #7a7c60;
  font-size: 0.75em;
  letter-spacing: 1px;
  min-width: 200px;
}
.feature-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(240, 215, 140, 0.3);
  background: rgba(255, 255, 255, 0.04);
  color: #9a8c6c;
  font-size: 1em;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}
.feature-close:hover {
  background: rgba(180, 80, 80, 0.2);
  border-color: #a06060;
  color: #cc7777;
}
.feature-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px 24px;
}

/* 功能分类区块 */
.feature-section {
  margin-bottom: 16px;
  border: 1px solid rgba(240, 215, 140, 0.1);
  border-radius: 12px;
  overflow: hidden;
}
.feature-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(240, 215, 140, 0.04);
  cursor: pointer;
  transition: background 0.2s;
  user-select: none;
}
.feature-section-header:hover {
  background: rgba(240, 215, 140, 0.09);
}
.feature-section-icon {
  font-size: 1.2em;
  flex-shrink: 0;
}
.feature-section-title {
  flex: 1;
  color: #f0d78c;
  font-size: 0.95em;
  font-weight: bold;
  letter-spacing: 1px;
}
.feature-section-count {
  color: #7a7c60;
  font-size: 0.75em;
}
.feature-section-arrow {
  color: #9a8c6c;
  font-size: 0.7em;
  transition: transform 0.2s;
}
.feature-section.open .feature-section-arrow {
  transform: rotate(90deg);
}
.feature-section-content {
  display: none;
  padding: 10px 16px 14px;
  border-top: 1px solid rgba(240, 215, 140, 0.06);
}
.feature-section.open .feature-section-content {
  display: block;
}

/* 功能条目 */
.feature-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
  font-size: 0.8em;
  line-height: 1.6;
  color: #c0c0c0;
}
.feature-item-name {
  color: #e0d5c1;
  font-weight: bold;
  white-space: nowrap;
  letter-spacing: 0.5px;
}
.feature-item-desc {
  color: #8a8c72;
  font-size: 0.9em;
}

/* 搜索结果高亮 */
.feature-search-wrap {
  padding: 0 4px 8px;
  border-bottom: 1px solid rgba(240, 215, 140, 0.08);
  margin-bottom: 10px;
}
.feature-search-input {
  width: 100%;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid rgba(240, 215, 140, 0.2);
  background: rgba(0, 0, 0, 0.3);
  color: #f0d78c;
  font-size: 0.9em;
  font-family: inherit;
  outline: none;
  transition: border-color 0.3s;
}
.feature-search-input:focus {
  border-color: #f0d78c;
}
.feature-search-input::placeholder {
  color: #5a5c40;
}

/* ==================== 八字合婚面板 ==================== */
.hehun-panel {
  margin-top: 20px;
  border: 1px solid rgba(240, 215, 140, 0.15);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
}
.hehun-header {
  padding: 16px 20px 8px;
  border-bottom: 1px solid rgba(240, 215, 140, 0.08);
}
.hehun-header h3 {
  color: #f0d78c;
  font-size: 1.05em;
  letter-spacing: 2px;
}
.hehun-desc {
  color: #7a7c60;
  font-size: 0.75em;
}
.hehun-body {
  padding: 16px 20px;
}
.hehun-select {
  margin-bottom: 14px;
}
.hehun-select label {
  display: block;
  color: #9a8c6c;
  font-size: 0.8em;
  margin-bottom: 6px;
}
.hehun-select select {
  width: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid rgba(240, 215, 140, 0.3);
  background: rgba(0, 0, 0, 0.3);
  color: #f0d78c;
  font-size: 0.9em;
  font-family: inherit;
  outline: none;
}
.hehun-select select option {
  background: #1a1a2e;
  color: #e0d5c1;
}
.hehun-result {
  padding: 16px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(240, 215, 140, 0.1);
  min-height: 60px;
  color: #9a8c6c;
  font-size: 0.85em;
}
.hehun-score {
  text-align: center;
  margin-bottom: 12px;
}
.hehun-score-num {
  font-size: 2.2em;
  font-weight: bold;
  letter-spacing: 2px;
}
.hehun-score-level {
  font-size: 0.9em;
  color: #c9a84c;
  margin-top: 2px;
}
.hehun-detail-item {
  padding: 4px 0;
  border-bottom: 1px solid rgba(240, 215, 140, 0.05);
  color: #c0c0c0;
}
.hehun-detail-item:last-child {
  border-bottom: none;
}
.hehun-empty {
  text-align: center;
  padding: 20px;
  color: #6a6c50;
}

/* ==================== 紫微盘面模式切换 ==================== */
.ziwei-mode-bar {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  border: 1px solid rgba(240, 215, 140, 0.1);
  justify-content: center;
}
.zm-btn {
  padding: 5px 14px;
  border-radius: 14px;
  border: 1px solid rgba(240, 215, 140, 0.2);
  background: rgba(0, 0, 0, 0.2);
  color: #9a8c6c;
  font-size: 0.8em;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 1px;
}
.zm-btn:hover {
  border-color: #c9a84c;
  color: #c9a84c;
}
.zm-btn.active {
  background: rgba(201, 168, 76, 0.2);
  border-color: #c9a84c;
  color: #f0d78c;
  box-shadow: 0 0 10px rgba(201, 168, 76, 0.2);
}

/* 飞星盘模式：高亮四化标记 */
.palace-cell.feixing-mode .sihua-badge {
  font-size: 0.85em;
  padding: 2px 8px;
  font-weight: bold;
}
.palace-cell.feixing-mode .minor-star-row {
  opacity: 0.5;
}

/* 四化盘模式：淡化星曜，突出四化 */
.palace-cell.sihua-mode .star-row,
.palace-cell.sihua-mode .aux-row,
.palace-cell.sihua-mode .minor-star-row {
  opacity: 0.3;
}
.palace-cell.sihua-mode .sihua-badge {
  font-size: 0.9em;
  padding: 3px 10px;
  font-weight: bold;
  border: 1px solid currentColor;
}

/* ==================== 断事笔记 ==================== */
.case-notes-section {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(240, 215, 140, 0.08);
}
.case-notes-toggle {
  color: #6aac7d;
  font-size: 0.75em;
  cursor: pointer;
  letter-spacing: 1px;
}
.case-notes-toggle:hover {
  color: #8fcf8f;
}
.case-notes-editor {
  margin-top: 8px;
  display: none;
}
.case-notes-editor.open {
  display: block;
}
.case-notes-input {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(240, 215, 140, 0.2);
  background: rgba(0, 0, 0, 0.3);
  color: #e0d5c1;
  font-size: 0.8em;
  font-family: inherit;
  resize: vertical;
  min-height: 50px;
  outline: none;
}
.case-notes-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  justify-content: flex-end;
}
.case-notes-save-btn {
  padding: 4px 14px;
  border-radius: 6px;
  border: 1px solid #6aac7d;
  background: rgba(106, 172, 125, 0.15);
  color: #6aac7d;
  font-size: 0.75em;
  cursor: pointer;
  font-family: inherit;
}
.case-notes-save-btn:hover {
  background: rgba(106, 172, 125, 0.3);
}
.case-notes-display {
  font-size: 0.75em;
  color: #a0b0a0;
  line-height: 1.5;
  margin-top: 4px;
  white-space: pre-wrap;
}

/* ==================== 流年流月控制栏 ==================== */
.liu-time-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(240,215,140,0.15);
  border-radius: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
  font-size: 0.78em;
}
.liu-label { color: #9a8c6c; margin-right: 4px; white-space: nowrap; }
.liu-btn {
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(240,215,140,0.2);
  background: transparent;
  color: #9a8c6c;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9em;
  white-space: nowrap;
}
.liu-btn.active { background: rgba(240,215,140,0.2); color: #f0d78c; border-color: rgba(240,215,140,0.5); }
.liu-btn:hover { background: rgba(240,215,140,0.1); }
.liu-info { color: #6a6c50; margin: 0 6px; }
.liu-num {
  width: 50px;
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid rgba(240,215,140,0.25);
  background: rgba(0,0,0,0.3);
  color: #f0d78c;
  font-family: inherit;
  font-size: 0.9em;
  text-align: center;
}
.liu-num-sm { width: 38px; }
.liu-sep { color: #6a6c50; font-size: 0.85em; }
.liu-sel {
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid rgba(240,215,140,0.25);
  background: rgba(0,0,0,0.3);
  color: #f0d78c;
  font-family: inherit;
  font-size: 0.85em;
}
.liu-reset { padding: 4px 10px; font-size: 0.85em; }
.liu-xiao-xian {
  font-size: 0.8em;
  color: #88ddaa;
  margin-left: auto;
  white-space: nowrap;
}

/* ==================== 叠宫标记 ==================== */
.overlay-badge {
  display: inline-block;
  font-size: 0.6em;
  color: #88aacc;
  background: rgba(136,170,204,0.15);
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 3px;
  vertical-align: middle;
}

/* ==================== 塔罗牌 ==================== */
.tarot-container { padding: 10px 0; }
.tarot-top { display: flex; gap: 20px; flex-wrap: wrap; }
.tarot-card-panel {
  flex: 2;
  min-width: 320px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(240,215,140,0.15);
  border-radius: 12px;
  padding: 18px;
}
.tarot-card-panel h3, .dice-panel h3 {
  color: #f0d78c;
  font-size: 1.05em;
  margin-bottom: 8px;
  text-align: center;
}
.tarot-spread-select { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.tarot-spread-btn {
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid rgba(240,215,140,0.2);
  background: transparent;
  color: #9a8c6c;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.8em;
}
.tarot-spread-btn.active { background: rgba(240,215,140,0.2); color: #f0d78c; border-color: rgba(240,215,140,0.5); }
.tarot-result, .dice-result { margin-top: 12px; }
.tarot-placeholder, .dice-placeholder {
  text-align: center;
  color: #6a6c50;
  padding: 20px;
  font-size: 0.9em;
}
.tarot-cards-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.tarot-card-item {
  flex: 1;
  min-width: 140px;
  max-width: 220px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(240,215,140,0.2);
  border-radius: 10px;
  padding: 14px;
  text-align: center;
}
.tarot-card-item.reversed { border-color: rgba(200,130,200,0.4); }
.tarot-card-pos {
  font-size: 0.7em;
  color: #9a8c6c;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.tarot-card-name { font-size: 1.05em; color: #f0d78c; margin-bottom: 3px; font-weight: bold; }
.tarot-card-id { font-size: 0.7em; color: #6a6c50; margin-bottom: 6px; }
.tarot-card-desc { font-size: 0.78em; color: #b0a080; line-height: 1.4; margin-bottom: 6px; }
.tarot-card-kw { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.tarot-kw-tag {
  font-size: 0.7em;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(240,215,140,0.1);
  color: #c9a84c;
}

/* 塔罗牌阵解读 */
.tarot-spread-header { text-align: center; margin-bottom: 14px; }
.tarot-spread-header h4 { color: #f0d78c; font-size: 1em; margin-bottom: 4px; }
.tarot-spread-desc { font-size: 0.8em; color: #9a8c6c; margin: 0; }
.tarot-card-pos-guide {
  font-size: 0.7em;
  color: #7a7c60;
  margin-bottom: 5px;
  line-height: 1.3;
  font-style: italic;
}
.tarot-overall-reading {
  margin-top: 16px;
  padding: 14px;
  background: rgba(240,215,140,0.06);
  border: 1px solid rgba(240,215,140,0.12);
  border-radius: 10px;
}
.tarot-overall-reading h5 { color: #c9a84c; font-size: 0.9em; margin-bottom: 8px; }
.tarot-overall-reading p { font-size: 0.82em; color: #b0a080; line-height: 1.6; margin-bottom: 8px; }
.tarot-stats {
  display: flex; gap: 16px; font-size: 0.72em; color: #7a7c60;
  margin-bottom: 6px;
}
.tarot-disclaimer {
  font-size: 0.68em !important;
  color: #5a5c40 !important;
  text-align: center;
  font-style: italic;
  margin-top: 6px !important;
}

/* 骰子面板 */
.dice-panel {
  flex: 1;
  min-width: 260px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(240,215,140,0.15);
  border-radius: 12px;
  padding: 18px;
}
.dice-desc { text-align: center; font-size: 0.8em; color: #7a7c60; margin-bottom: 8px; }
.dice-display { display: flex; gap: 14px; justify-content: center; align-items: center; margin-bottom: 10px; }
.dice-item { text-align: center; }
.dice-glyph { font-size: 2em; display: block; }
.dice-label { font-size: 0.75em; color: #9a8c6c; display: block; margin-top: 2px; }
.dice-interp { font-size: 0.8em; color: #b0a080; line-height: 1.5; text-align: center; padding: 8px; background: rgba(0,0,0,0.15); border-radius: 6px; }
.dice-multi-item { margin-bottom: 8px; padding: 8px; background: rgba(0,0,0,0.15); border-radius: 6px; }
.dice-multi-idx { font-size: 0.7em; color: #9a8c6c; margin-right: 6px; }

/* ==================== 星座运势 ==================== */
.horo-container { padding: 10px 0; }
.horo-top { margin-bottom: 16px; }
.horo-zodiac-select h3 { color: #f0d78c; font-size: 1.1em; margin-bottom: 10px; }
.zodiac-picker { display: flex; gap: 6px; flex-wrap: wrap; }
.zodiac-chip {
  padding: 7px 13px;
  border-radius: 20px;
  border: 1px solid rgba(240,215,140,0.2);
  background: transparent;
  color: #9a8c6c;
  cursor: pointer;
  font-size: 0.85em;
  font-family: inherit;
  transition: all 0.2s;
}
.zodiac-chip:hover { background: rgba(240,215,140,0.08); }
.zodiac-chip.active { background: rgba(240,215,140,0.2); color: #f0d78c; border-color: rgba(240,215,140,0.5); }
.horo-placeholder { text-align: center; color: #6a6c50; padding: 40px; font-size: 0.9em; }

/* 星座性格 */
.horo-profile {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(240,215,140,0.15);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
}
.horo-profile-header { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.horo-big-sym { font-size: 3em; }
.horo-profile-header h3 { color: #f0d78c; font-size: 1.3em; margin-bottom: 4px; }
.horo-meta { font-size: 0.78em; color: #7a7c60; }
.horo-profile-body { display: flex; flex-direction: column; gap: 10px; }
.hp-section h4 { color: #c9a84c; font-size: 0.9em; margin-bottom: 3px; }
.hp-section p { font-size: 0.82em; color: #b0a080; line-height: 1.5; }
.hp-kw { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 4px; }
.hp-kw-tag { font-size: 0.72em; padding: 3px 10px; border-radius: 12px; background: rgba(240,215,140,0.1); color: #c9a84c; }

/* 每日运势 */
.horo-daily {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(240,215,140,0.15);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 14px;
}
.horo-daily h4 { color: #f0d78c; font-size: 0.95em; margin-bottom: 10px; }
.horo-ratings { display: flex; flex-direction: column; gap: 6px; }
.horo-rating-item { display: flex; gap: 10px; align-items: center; font-size: 0.82em; }
.horo-cat { width: 40px; color: #9a8c6c; }
.horo-stars { color: #f0d78c; font-size: 0.9em; letter-spacing: 2px; }
.horo-advice { color: #b0a080; flex: 1; }
.horo-lucky { font-size: 0.8em; color: #7a7c60; margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(240,215,140,0.1); }
.horo-yearly {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(240,215,140,0.15);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 14px;
}
.horo-yearly h4 { color: #f0d78c; font-size: 0.95em; margin-bottom: 8px; }
.horo-yearly p { font-size: 0.82em; color: #b0a080; line-height: 1.5; }

/* 万年历 */
.horo-calendar {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(240,215,140,0.15);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 14px;
}
.horo-calendar h4 { color: #f0d78c; font-size: 0.95em; margin-bottom: 10px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-header {
  text-align: center;
  font-size: 0.78em;
  color: #9a8c6c;
  padding: 6px;
  font-weight: bold;
}
.cal-day {
  text-align: center;
  font-size: 0.82em;
  color: #c0b080;
  padding: 8px 4px;
  border-radius: 6px;
  background: rgba(255,255,255,0.03);
  min-width: 30px;
}
.cal-day.empty { background: transparent; }

/* ==================== 小六壬 ==================== */
.xiao-liuren-panel {
  flex: 1;
  min-width: 320px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(240,215,140,0.15);
  border-radius: 12px;
  padding: 18px;
  margin-top: 14px;
}
.xiao-liuren-panel h3 { color: #f0d78c; font-size: 1.05em; margin-bottom: 4px; text-align: center; }
.xlr-desc { text-align: center; font-size: 0.78em; color: #7a7c60; margin-bottom: 12px; }
.xlr-inputs { display: flex; gap: 8px; align-items: flex-end; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
.xlr-input-group { display: flex; flex-direction: column; gap: 3px; align-items: center; }
.xlr-input-group label { font-size: 0.7em; color: #9a8c6c; }
.xlr-num {
  width: 55px;
  padding: 5px 4px;
  border-radius: 6px;
  border: 1px solid rgba(240,215,140,0.25);
  background: rgba(0,0,0,0.3);
  color: #f0d78c;
  font-family: inherit;
  font-size: 0.9em;
  text-align: center;
}
.xlr-num-sm { width: 44px; }
.xlr-sel {
  padding: 5px 6px;
  border-radius: 6px;
  border: 1px solid rgba(240,215,140,0.25);
  background: rgba(0,0,0,0.3);
  color: #f0d78c;
  font-family: inherit;
  font-size: 0.82em;
}
.xlr-digits {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.xlr-digits-label { font-size: 0.75em; color: #7a7c60; }
.xlr-result { margin-top: 14px; }
.xlr-placeholder {
  text-align: center;
  color: #6a6c50;
  padding: 24px;
  font-size: 0.9em;
}
.xlr-card {
  background: rgba(0,0,0,0.2);
  border-radius: 10px;
  padding: 16px;
}
.xlr-card-header { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.xlr-big-glyph { font-size: 2.5em; }
.xlr-card-title { display: flex; flex-direction: column; gap: 2px; }
.xlr-name { font-size: 1.4em; font-weight: bold; }
.xlr-trait { font-size: 0.82em; color: #9a8c6c; }
.xlr-props { font-size: 0.76em; color: #7a7c60; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(240,215,140,0.08); }
.xlr-formula {
  font-size: 0.7em;
  color: #6a8c60;
  background: rgba(100,140,100,0.1);
  padding: 4px 8px;
  border-radius: 4px;
  margin-bottom: 8px;
  font-family: 'SF Mono', monospace;
}
.xlr-input-display { font-size: 0.78em; color: #9a8c6c; margin-bottom: 12px; }
.xlr-sections { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.xlr-sec {
  background: rgba(255,255,255,0.02);
  border-radius: 6px;
  padding: 8px 10px;
}
.xlr-sec h5 { color: #c9a84c; font-size: 0.78em; margin-bottom: 3px; }
.xlr-sec p { font-size: 0.74em; color: #b0a080; line-height: 1.45; }
.xlr-keywords { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.xlr-kw-tag {
  font-size: 0.7em;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(240,215,140,0.1);
  color: #c9a84c;
}
.xlr-all-positions { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(240,215,140,0.1); }
.xlr-all-positions h5 { color: #9a8c6c; font-size: 0.78em; margin-bottom: 8px; text-align: center; }
.xlr-positions-row { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.xlr-pos-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  min-width: 50px;
  transition: background 0.2s;
}
.xlr-pos-chip:hover { background: rgba(255,255,255,0.06); }
.xlr-pos-chip.active { background: rgba(240,215,140,0.1); }
.xlr-pos-glyph { font-size: 1.3em; margin-bottom: 2px; }
.xlr-pos-name { font-size: 0.7em; color: #9a8c6c; }

/* ==================== 流年盘增强图例 ==================== */
.liu-legend-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.72em;
  color: #7a7c60;
  margin-top: 4px;
  justify-content: center;
}

/* ==================== 山 — 子午流注 ==================== */
.shan-now-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(240,215,140,0.15);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  text-align: center;
}
.shan-now-time { font-size: 0.85em; color: #9a8c6c; display: block; margin-bottom: 4px; }
.shan-now-meridian { font-size: 1.3em; font-weight: bold; display: block; }
.shan-now-element { font-size: 0.82em; color: #7a7c60; display: block; margin-top: 4px; }
.shan-now-tip { font-size: 0.85em; color: #b0a080; margin-top: 8px; line-height: 1.5; }

.shan-meridian-table { margin-top: 16px; }
.shan-meridian-table h4 { color: #c9a84c; font-size: 0.95em; margin-bottom: 10px; }
.shan-meridian-grid { display: flex; flex-direction: column; gap: 6px; }
.shan-mer-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  border-left: 3px solid transparent;
  font-size: 0.78em;
  flex-wrap: wrap;
}
.shan-mer-item.active { background: rgba(240,215,140,0.08); }
.sm-name { color: #f0d78c; font-weight: bold; min-width: 55px; }
.sm-organ { color: #e0d5c1; min-width: 35px; }
.sm-time { color: #9a8c6c; min-width: 120px; }
.sm-element { color: #7a7c60; min-width: 40px; }
.sm-tip { color: #8a8c7a; font-size: 0.9em; flex: 1; }

/* ==================== 山 — 五行养生 ==================== */
#shanWuxingPicker h4 { color: #c9a84c; font-size: 0.95em; margin-bottom: 10px; text-align: center; }
.sw-picker-row { display: flex; gap: 8px; justify-content: center; margin-bottom: 16px; }
.sw-pick-chip {
  padding: 8px 20px;
  border-radius: 20px;
  border: 2px solid;
  background: transparent;
  cursor: pointer;
  font-size: 0.9em;
  font-weight: bold;
  transition: all 0.2s;
}
.sw-pick-chip:hover { opacity: 0.8; }
.sw-pick-chip.active { opacity: 1; }

.sw-detail { background: rgba(255,255,255,0.03); border-radius: 10px; padding: 20px; }
.sw-detail h3 { font-size: 1.2em; margin-bottom: 10px; }
.sw-props { font-size: 0.8em; color: #8a8c7a; margin-bottom: 12px; }
.sw-props b { color: #b0a080; }
.sw-desc { font-size: 0.85em; color: #b0a080; line-height: 1.6; margin-bottom: 10px; }
.sw-avoid { font-size: 0.82em; color: #cc8866; background: rgba(200,100,60,0.08); padding: 8px 12px; border-radius: 6px; margin-bottom: 12px; }
.sw-foods h5 { color: #c9a84c; font-size: 0.85em; margin-bottom: 6px; }
.sw-food-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.sw-food-tag {
  font-size: 0.78em;
  padding: 3px 12px;
  border-radius: 12px;
  background: rgba(240,215,140,0.08);
  color: #c9a84c;
  border: 1px solid rgba(240,215,140,0.15);
}
.sw-tips h5 { color: #c9a84c; font-size: 0.85em; margin-bottom: 6px; }
.sw-tips ul { padding-left: 18px; font-size: 0.8em; color: #9a9c88; line-height: 1.8; }

/* ==================== 山 — 打坐冥想 ==================== */
.med-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(240,215,140,0.12);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 14px;
}
.med-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.med-header h4 { color: #f0d78c; font-size: 1em; }
.med-meta { font-size: 0.75em; color: #7a7c60; }
.med-steps { padding-left: 20px; font-size: 0.82em; color: #b0a080; line-height: 1.8; }
.med-tip { font-size: 0.8em; color: #8aac8a; background: rgba(100,160,100,0.06); padding: 8px 12px; border-radius: 6px; margin-top: 10px; }

/* ==================== 山 — 五脏排毒 ==================== */
.shan-detox-table h4 { color: #c9a84c; font-size: 0.95em; margin-bottom: 10px; }
.detox-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.5fr 1.5fr;
  gap: 2px;
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
  padding: 12px;
  font-size: 0.78em;
}
.detox-grid b { color: #9a8c6c; padding: 4px 6px; font-size: 0.85em; }
.detox-grid span {
  padding: 6px 8px;
  color: #b0a080;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.detox-time { font-weight: bold; color: #f0d78c; }
.detox-time.active { color: #88ddaa; }
.detox-advice { font-size: 0.9em; color: #8a8c7a; }

/* ==================== 医 — 体质辨识 ==================== */
.yi-intro-text { font-size: 0.85em; color: #8a8c7a; text-align: center; margin-bottom: 14px; }
.yi-const-cards { display: grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap: 8px; margin-bottom: 16px; }
.yi-const-card {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  border-left: 4px solid;
  cursor: pointer;
  transition: background 0.2s;
}
.yi-const-card:hover { background: rgba(255,255,255,0.06); }
.yi-const-card.active { background: rgba(240,215,140,0.08); }
.yic-emoji { font-size: 1.4em; }
.yic-info { display: flex; flex-direction: column; gap: 2px; }
.yic-name { font-size: 0.95em; font-weight: bold; }
.yic-trait { font-size: 0.75em; color: #8a8c7a; }
.yi-const-detail {
  background: rgba(255,255,255,0.03);
  border-radius: 10px;
  padding: 16px;
}
.yi-const-detail h3 { font-size: 1.1em; margin-bottom: 8px; }
.yid-trait { font-size: 0.9em; color: #f0d78c; margin-bottom: 8px; }
.yid-desc { font-size: 0.82em; color: #b0a080; margin-bottom: 10px; line-height: 1.5; }
.yid-row { font-size: 0.8em; color: #9a8c6c; margin-bottom: 4px; }
.yid-care h5, .yid-avoid h5 { color: #c9a84c; font-size: 0.82em; margin-bottom: 4px; margin-top: 10px; }
.yid-care ul, .yid-avoid ul { padding-left: 18px; font-size: 0.78em; color: #9a9c88; line-height: 1.7; }
.yid-avoid h5 { color: #cc8866; }
.yid-avoid ul { color: #b08070; }

/* ==================== 医 — 五行脏腑 ==================== */
.yzf-grid { display: flex; flex-direction: column; gap: 12px; }
.yzf-card {
  background: rgba(255,255,255,0.03);
  border-radius: 10px;
  padding: 16px;
  border-top: 3px solid;
}
.yzf-card h4 { font-size: 1.05em; margin-bottom: 6px; }
.yzf-desc { font-size: 0.8em; color: #b0a080; line-height: 1.5; margin-bottom: 4px; }
.yzf-imb { font-size: 0.78em; color: #cc8866; margin-bottom: 6px; }
.yzf-meta { font-size: 0.72em; color: #7a7c60; margin-bottom: 8px; }
.yzf-foods { display: flex; gap: 5px; flex-wrap: wrap; }
.yzf-food-tag {
  font-size: 0.72em;
  padding: 2px 9px;
  border-radius: 10px;
  background: rgba(240,215,140,0.08);
  color: #c9a84c;
}

/* ==================== 医 — 节气养生 ==================== */
.yj-now-card {
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 16px;
  border-left: 4px solid;
}
.yj-now-name { font-size: 1.1em; color: #f0d78c; display: block; margin-bottom: 4px; }
.yj-now-meta { font-size: 0.78em; color: #7a7c60; display: block; margin-bottom: 6px; }
.yj-now-advice { font-size: 0.84em; color: #b0a080; line-height: 1.5; }
.yj-all-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap: 6px; }
.yj-term-chip {
  padding: 8px 12px;
  background: rgba(255,255,255,0.02);
  border-radius: 8px;
  border-left: 3px solid;
  font-size: 0.76em;
}
.yjt-name { display: block; color: #f0d78c; font-weight: bold; }
.yjt-season { display: block; color: #7a7c60; font-size: 0.85em; }
.yjt-advice { display: block; color: #8a8c7a; margin-top: 3px; line-height: 1.4; }

/* ==================== 相 — 手相 ==================== */
.xiang-palm-lines h4, .xiang-palm-hills h4 { color: #c9a84c; font-size: 0.95em; margin-bottom: 10px; }
.xp-lines { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.xp-line-card {
  background: rgba(255,255,255,0.03);
  border-radius: 10px;
  padding: 16px;
  border-top: 3px solid;
}
.xp-line-card h4 { font-size: 1em; margin-bottom: 6px; }
.xp-desc { font-size: 0.8em; color: #8a8c7a; margin-bottom: 10px; }
.xp-readings { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.xp-reading-item { padding: 4px 0; }
.xpr-key { font-size: 0.72em; color: #c9a84c; font-weight: bold; display: block; }
.xpr-val { font-size: 0.74em; color: #9a9c88; display: block; }
.xp-hills { display: grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap: 8px; }
.xp-hill-card {
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  padding: 10px 14px;
}
.xp-hill-card h5 { color: #e0d5c1; font-size: 0.85em; }
.xph-pos { display: block; font-size: 0.72em; color: #7a7c60; }
.xph-meaning { display: block; font-size: 0.76em; color: #b0a080; margin-top: 2px; }
.xph-trait { display: block; font-size: 0.72em; color: #8a8c7a; }

/* ==================== 相 — 面相十二宫 ==================== */
.xf-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(230px,1fr)); gap: 8px; }
.xf-palace-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(240,215,140,0.1);
  border-radius: 10px;
  padding: 12px 14px;
}
.xf-palace-card h5 { color: #f0d78c; font-size: 0.9em; margin-bottom: 3px; }
.xf-pos { display: block; font-size: 0.72em; color: #c9a84c; }
.xf-meaning { display: block; font-size: 0.74em; color: #7a7c60; margin-bottom: 6px; }
.xf-good { font-size: 0.74em; color: #8ab87a; margin-bottom: 2px; }
.xf-bad { font-size: 0.74em; color: #b08070; }

/* ==================== 相 — 风水九宫飞星 ==================== */
.xiang-fs-control { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; justify-content: center; }
.xiang-fs-control label { color: #9a8c6c; }
.xiang-fs-control input {
  width: 80px; padding: 6px 8px; border-radius: 6px;
  border: 1px solid rgba(240,215,140,0.25);
  background: rgba(0,0,0,0.3); color: #f0d78c;
  font-family: inherit; text-align: center;
}
.xfs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.xfs-cell {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(240,215,140,0.1);
  border-left: 3px solid;
  border-radius: 8px;
  padding: 10px 12px;
  text-align: center;
}
.xfs-star { display: block; font-size: 1.1em; color: #f0d78c; font-weight: bold; }
.xfs-name { display: block; font-size: 0.72em; color: #b0a080; }
.xfs-pos { display: block; font-size: 0.7em; color: #9a8c6c; }
.xfs-nature { display: block; font-size: 0.78em; font-weight: bold; margin-top: 2px; }
.xfs-desc { display: block; font-size: 0.7em; color: #7a7c60; margin-top: 3px; line-height: 1.4; }

/* ==================== 梅花易数 ==================== */
.meihua-panel {
  max-width: 600px;
  margin: 0 auto;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(240,215,140,0.12);
  border-radius: 12px;
  padding: 20px;
}
.meihua-panel h3 { color: #f0d78c; text-align: center; font-size: 1.1em; }
.mh-desc { text-align: center; font-size: 0.78em; color: #7a7c60; margin-bottom: 14px; }
.mh-inputs { display: flex; gap: 8px; align-items: flex-end; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
.mh-input-group { display: flex; flex-direction: column; gap: 3px; align-items: center; }
.mh-input-group label { font-size: 0.7em; color: #9a8c6c; }
.mh-num {
  width: 60px; padding: 5px;
  border-radius: 6px; border: 1px solid rgba(240,215,140,0.25);
  background: rgba(0,0,0,0.3); color: #f0d78c;
  font-family: inherit; text-align: center; font-size: 0.9em;
}
.mh-num-sm { width: 45px; }
.mh-sel {
  padding: 5px 6px; border-radius: 6px;
  border: 1px solid rgba(240,215,140,0.25);
  background: rgba(0,0,0,0.3); color: #f0d78c;
  font-family: inherit; font-size: 0.82em;
}
.mh-digits {
  display: flex; gap: 6px; align-items: center; justify-content: center;
  flex-wrap: wrap; margin-bottom: 14px;
}
.mh-digits-label { font-size: 0.75em; color: #7a7c60; }
.mh-result { margin-top: 16px; }
.mh-result-card {
  background: rgba(0,0,0,0.2); border-radius: 10px; padding: 16px;
}
.mh-gua-display {
  display: flex; gap: 8px; align-items: center;
  padding: 12px; background: rgba(255,255,255,0.04); border-radius: 8px;
  margin-bottom: 8px; flex-wrap: wrap; justify-content: center;
}
.mh-gua-label { font-size: 0.7em; color: #9a8c6c; margin-right: 4px; }
.mh-gua-sym { font-size: 1.8em; }
.mh-gua-name { font-size: 1em; color: #f0d78c; font-weight: bold; }
.mh-bian { opacity: 0.75; }
.mh-dongyao { text-align: center; font-size: 0.85em; color: #c9a84c; margin-bottom: 8px; }
.mh-tiyong {
  padding: 10px 14px; background: rgba(255,255,255,0.04); border-radius: 8px;
  border-left: 4px solid; margin-bottom: 8px;
}
.mh-relation { font-size: 1em; font-weight: bold; display: block; }
.mh-ty-desc { font-size: 0.82em; color: #b0a080; margin-top: 4px; display: block; }
.mh-formula { font-size: 0.7em; color: #6a8c60; background: rgba(100,140,100,0.08); padding: 4px 8px; border-radius: 4px; font-family: monospace; }

/* ==================== 六爻起卦 ==================== */
.liuyao-panel {
  max-width: 500px; margin: 0 auto;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(240,215,140,0.12);
  border-radius: 12px; padding: 20px;
}
.liuyao-panel h3 { color: #f0d78c; text-align: center; font-size: 1.1em; }
.ly-desc { text-align: center; font-size: 0.78em; color: #7a7c60; margin-bottom: 8px; }
.ly-result { margin-top: 14px; }
.ly-result-card {
  background: rgba(0,0,0,0.2); border-radius: 10px; padding: 16px;
}
.ly-gua {
  display: flex; gap: 8px; align-items: center; justify-content: center;
  padding: 10px; background: rgba(255,255,255,0.04); border-radius: 8px;
  margin-bottom: 8px;
}
.ly-gua-label { font-size: 0.7em; color: #9a8c6c; }
.ly-gua-sym { font-size: 2em; }
.ly-gua-name { font-size: 1.1em; color: #f0d78c; font-weight: bold; }
.ly-bian { opacity: 0.7; }
.ly-yao-lines { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.ly-yao-row {
  display: flex; gap: 8px; align-items: center; padding: 6px 10px;
  background: rgba(255,255,255,0.02); border-radius: 6px;
  font-size: 0.82em;
}
.ly-yao-pos { color: #9a8c6c; min-width: 40px; }
.ly-yao-sym { font-size: 1.2em; }
.ly-yao-type { color: #e0d5c1; min-width: 48px; }
.ly-yao-bian { color: #c9a84c; font-weight: bold; }
.ly-tip { font-size: 0.72em; color: #6a6c50; text-align: center; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(240,215,140,0.08); }

/* 梅花易数 & 六爻 卦象释义 */
.mh-gua-interp, .ly-gua-interp {
  margin-bottom: 10px; padding: 10px; background: rgba(240,215,140,0.04);
  border-radius: 8px; border-left: 3px solid rgba(240,215,140,0.2);
}
.mh-gua-interp h5, .ly-gua-interp h5 {
  color: #c9a84c; font-size: 0.8em; margin-bottom: 4px;
}
.mh-gua-interp p, .ly-gua-interp p {
  font-size: 0.78em; color: #b0a080; line-height: 1.5; margin: 0;
}
.mh-hu { opacity: 0.75; }
.mh-sections, .ly-sections {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
  margin: 10px 0;
}
.mh-sec, .ly-sec {
  padding: 8px; background: rgba(255,255,255,0.03);
  border-radius: 6px;
}
.mh-sec h5, .ly-sec h5 {
  color: #c9a84c; font-size: 0.72em; margin-bottom: 2px;
}
.mh-sec p, .ly-sec p {
  font-size: 0.72em; color: #9a8c6c; line-height: 1.4; margin: 0;
}
.mh-disclaimer, .ly-disclaimer {
  font-size: 0.65em; color: #5a5c40; text-align: center;
  font-style: italic; margin-top: 6px;
}
.ly-gua-nature {
  font-size: 0.7em; color: #7a7c60; margin-left: 4px;
}
.ly-yao-row.changing {
  border-left: 2px solid rgba(240,215,140,0.3);
}

/* 占星骰子增强 */
.dice-enhanced-interp {
  margin-top: 10px; padding: 10px; background: rgba(240,215,140,0.04);
  border-radius: 8px;
}
.dice-enhanced-interp h5 {
  color: #c9a84c; font-size: 0.8em; margin-bottom: 6px;
}
.dice-enhanced-interp p {
  font-size: 0.76em; color: #b0a080; line-height: 1.5; margin-bottom: 4px;
}
.dice-enhanced-interp .dice-tag {
  display: inline-block; font-size: 0.7em; padding: 2px 8px;
  margin: 2px 4px; border-radius: 4px;
  background: rgba(240,215,140,0.1); color: #c9a84c;
}

/* ==================== 手机端响应式 ==================== */
@media (max-width: 768px) {
  body { padding: 10px; }
  .header { padding: 16px 0 10px; }
  .header h1 { font-size: 1.6em; letter-spacing: 2px; }
  .header .subtitle { font-size: 0.78em; }

  /* 五术主标签栏 */
  .wushu-tab-bar { gap: 4px; padding: 4px; border-radius: 20px; }
  .wushu-tab { padding: 8px 14px; font-size: 0.82em; letter-spacing: 1px; border-radius: 16px; }

  /* 子标签栏 */
  .wushu-sub-tabs { gap: 3px; }
  .ws-tab { padding: 5px 10px; font-size: 0.72em; border-radius: 12px; }

  /* 输入面板 */
  .input-panel { padding: 16px; border-radius: 12px; }
  .form-row { flex-direction: column; gap: 10px; }
  .form-group input, .form-group select { width: 100%; min-width: auto; }
  .time-input-row { justify-content: center; }
  .time-num { width: 50px !important; min-width: 50px !important; }

  /* 八字信息条 */
  .bazi-bar { gap: 8px; padding: 10px 12px; }
  .bazi-item { min-width: 50px; }
  .bazi-item .value { font-size: 1em; }

  /* 命盘缩小 */
  .chart-container { max-width: 100%; }
  .chart-grid { gap: 3px; }
  .palace-cell { padding: 4px 3px; }
  .palace-name { font-size: 0.68em; }
  .palace-ganzhi { font-size: 0.6em; }
  .star-item { font-size: 0.58em; }
  .star-item.main-star { font-size: 0.65em; }
  .center-info .center-name { font-size: 1.2em; }
  .center-info .center-bureau { font-size: 0.7em; }
  .center-info .center-info-item { font-size: 0.65em; }

  /* 流年控制栏 */
  .liu-time-bar { gap: 3px; padding: 8px 10px; font-size: 0.7em; }
  .liu-btn { padding: 3px 7px; font-size: 0.78em; }
  .liu-num, .liu-num-sm { width: 38px !important; padding: 3px 4px; font-size: 0.78em; }

  /* 紫微盘面模式 */
  .ziwei-mode-bar { gap: 4px; }
  .zm-btn { padding: 4px 10px; font-size: 0.7em; }

  /* 星盘 */
  .astro-layout { gap: 12px; }
  .astro-wheel-container { min-height: 300px; }
  .astro-right { grid-template-columns: 1fr; }

  /* 详情面板 */
  .detail-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .detail-item { font-size: 0.78em; padding: 6px 8px; }

  /* 塔罗牌 */
  .tarot-top { flex-direction: column; }
  .tarot-card-panel, .dice-panel { min-width: auto; }
  .tarot-cards-row { flex-direction: column; align-items: center; }
  .tarot-card-item { max-width: 100%; }

  /* 小六壬 */
  .xlr-sections { grid-template-columns: 1fr; }
  .xlr-inputs { gap: 5px; }
  .xlr-num { width: 44px; }

  /* 星座运势 */
  .horo-profile-header { flex-direction: column; text-align: center; }
  .horo-big-sym { font-size: 2em; }

  /* 山 - 子午流注 */
  .shan-mer-item { flex-wrap: wrap; gap: 6px; font-size: 0.7em; }
  .shan-meridian-grid { gap: 4px; }

  /* 山 - 五脏排毒 */
  .detox-grid { grid-template-columns: 1fr 1fr; font-size: 0.7em; padding: 8px; }

  /* 医 - 体质 */
  .yi-const-cards { grid-template-columns: 1fr; }

  /* 医 - 节气 */
  .yj-all-grid { grid-template-columns: 1fr; }

  /* 相 - 手相 */
  .xp-readings { grid-template-columns: 1fr; }
  .xp-hills { grid-template-columns: 1fr 1fr; }

  /* 相 - 面相 */
  .xf-grid { grid-template-columns: 1fr 1fr; }

  /* 相 - 风水 */
  .xfs-grid { grid-template-columns: 1fr 1fr; gap: 5px; }

  /* 梅花易数 */
  .mh-inputs { gap: 5px; }

  /* 命例库面板 */
  .cases-panel { width: 90vw !important; max-width: 360px; }
  .btn-float-cases { bottom: 12px; right: 12px; width: 42px; height: 42px; font-size: 1.2em; }

  /* 弹窗自适应 */
  .star-popup { max-width: 90vw; }
  .feature-panel { width: 95vw; max-height: 90vh; }
  .feature-header { padding: 12px 16px 0; }
  .feature-header h3 { font-size: 1em; }
  .feature-item { font-size: 0.72em; }
  .feature-item-name { white-space: normal; }

  /* 保存对话框 */
  .modal-box { width: 90vw; padding: 20px; }

  /* 八字解读 */
  .br-pillars-table { overflow-x: auto; }
  .br-table { font-size: 0.7em; }
  .br-table th, .br-table td { padding: 5px 4px; }
  .br-flow-nav { gap: 3px; padding: 8px; }
  .br-flow-btn { padding: 3px 7px; font-size: 0.68em; }

  /* 小按钮适配 */
  .btn { padding: 8px 18px; font-size: 0.9em; }
  .btn-sm { padding: 5px 12px; font-size: 0.75em; }
  .btn-primary { padding: 10px 22px; }

  /* 图例缩小 */
  .legend { font-size: 0.65em; gap: 8px; }
  .astro-legend-text { font-size: 0.65em; gap: 8px; }
}

@media (max-width: 400px) {
  .wushu-tab { padding: 6px 10px; font-size: 0.75em; }
  .chart-grid { gap: 2px; }
  .palace-header { flex-direction: column; align-items: flex-start; gap: 1px; }
  .palace-name { font-size: 0.62em; }
  .palace-ganzhi { font-size: 0.55em; }
  .star-item { font-size: 0.52em; }
  .star-item.main-star { font-size: 0.58em; }
  .xfs-grid { grid-template-columns: 1fr; }
  .xf-grid { grid-template-columns: 1fr; }
  .xp-hills { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
  .bazi-item { min-width: 40px; }
  .bazi-item .value { font-size: 0.85em; }
  .center-info .center-name { font-size: 1em; }
  .xiang-guide-body pre { font-size: 0.6em; padding: 8px; }
  .xiang-guide-row { flex-direction: column; }
}

/* ==================== 新手教程 ==================== */

.btn-tutorial {
  padding: 10px 28px;
  border-radius: 22px;
  border: 1px solid rgba(160, 220, 140, 0.5);
  background: linear-gradient(135deg, rgba(100, 200, 120, 0.15), rgba(80, 160, 100, 0.05));
  color: #8fd8a0;
  font-size: 0.95em;
  font-family: inherit;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.3s;
  margin-left: 12px;
  white-space: nowrap;
}

.btn-tutorial:hover {
  background: rgba(100, 200, 120, 0.25);
  box-shadow: 0 0 18px rgba(100, 200, 120, 0.25);
  border-color: rgba(160, 220, 140, 0.7);
  transform: translateY(-1px);
}

.tutorial-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  animation: tutorialFadeIn 0.25s ease;
  backdrop-filter: blur(4px);
}

@keyframes tutorialFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.tutorial-dialog {
  background: linear-gradient(160deg, #1e2a3a 0%, #1a2535 50%, #162030 100%);
  border: 1px solid rgba(160, 220, 140, 0.3);
  border-radius: 20px;
  width: 90vw;
  max-width: 620px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(100, 200, 120, 0.08);
  animation: tutorialSlideUp 0.3s ease;
}

@keyframes tutorialSlideUp {
  from { opacity: 0; transform: translateY(30px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.tutorial-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.tutorial-step-indicator {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tutorial-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  cursor: pointer;
  transition: all 0.3s;
}

.tutorial-dot.active {
  background: #6fd88a;
  box-shadow: 0 0 10px rgba(111, 216, 138, 0.5);
  transform: scale(1.3);
}

.tutorial-dot.done {
  background: rgba(111, 216, 138, 0.4);
}

.tutorial-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  color: #999;
  font-size: 1.1em;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tutorial-close:hover {
  background: rgba(255, 100, 100, 0.15);
  border-color: rgba(255, 100, 100, 0.4);
  color: #ff8888;
}

.tutorial-body {
  padding: 20px 28px 24px;
  text-align: center;
}

.tutorial-emoji {
  font-size: 3em;
  margin-bottom: 10px;
}

.tutorial-title {
  font-size: 1.3em;
  color: #8fd8a0;
  margin-bottom: 20px;
  letter-spacing: 1px;
  font-weight: bold;
}

.tutorial-content {
  text-align: left;
  font-size: 0.9em;
  color: #c8c8d0;
  line-height: 2;
}

.tutorial-content p {
  margin-bottom: 10px;
}

.tutorial-content strong {
  color: #f0d78c;
}

.tutorial-content em {
  color: #a0c8e0;
  font-style: normal;
}

.tutorial-content mark {
  background: rgba(240, 215, 140, 0.15);
  color: #f0d78c;
  padding: 1px 6px;
  border-radius: 3px;
}

.tutorial-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 24px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.tutorial-progress {
  font-size: 0.8em;
  color: #7a8c6a;
  letter-spacing: 1px;
  min-width: 50px;
  text-align: center;
}

.tutorial-btn {
  padding: 10px 20px;
  border-radius: 20px;
  border: 1px solid rgba(160, 220, 140, 0.3);
  background: rgba(100, 200, 120, 0.1);
  color: #a0d8b0;
  font-size: 0.88em;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.25s;
  letter-spacing: 1px;
  white-space: nowrap;
}

.tutorial-btn:hover {
  background: rgba(100, 200, 120, 0.2);
  border-color: rgba(160, 220, 140, 0.55);
}

.tutorial-btn-next {
  background: linear-gradient(135deg, rgba(100, 200, 120, 0.25), rgba(80, 160, 100, 0.12));
  border-color: rgba(140, 210, 130, 0.45);
  color: #a0f0b8;
  font-weight: bold;
}

.tutorial-btn-next:hover {
  background: linear-gradient(135deg, rgba(120, 220, 140, 0.35), rgba(100, 180, 120, 0.18));
  box-shadow: 0 0 18px rgba(100, 200, 120, 0.2);
}

.tutorial-btn-finish {
  background: linear-gradient(135deg, rgba(240, 200, 80, 0.3), rgba(200, 160, 50, 0.15));
  border-color: rgba(240, 200, 80, 0.5);
  color: #f0d060;
  font-weight: bold;
  font-size: 0.95em;
}

.tutorial-btn-finish:hover {
  background: linear-gradient(135deg, rgba(250, 210, 90, 0.4), rgba(210, 170, 60, 0.2));
  box-shadow: 0 0 22px rgba(240, 200, 80, 0.25);
}

.tutorial-highlight {
  position: relative;
  z-index: 10000 !important;
  outline: 3px solid rgba(111, 216, 138, 0.6) !important;
  outline-offset: 4px;
  border-radius: 8px;
  box-shadow: 0 0 30px rgba(111, 216, 138, 0.25) !important;
  animation: tutorialPulse 2s ease-in-out infinite;
}

@keyframes tutorialPulse {
  0%, 100% { outline-color: rgba(111, 216, 138, 0.4); }
  50% { outline-color: rgba(111, 216, 138, 0.8); }
}

@media (max-width: 768px) {
  .tutorial-dialog {
    width: 95vw;
    max-height: 90vh;
    border-radius: 16px;
  }
  .tutorial-body { padding: 16px 18px 20px; }
  .tutorial-title { font-size: 1.1em; }
  .tutorial-content { font-size: 0.82em; line-height: 1.85; }
  .tutorial-footer { gap: 8px; padding: 10px 16px 16px; }
  .tutorial-btn { padding: 8px 16px; font-size: 0.8em; }
  .btn-tutorial { padding: 8px 16px; font-size: 0.82em; margin-left: 6px; }
  .btn-lang { padding: 4px 10px; font-size: 0.78em; margin-left: 4px; }
}

@media (max-width: 400px) {
  .tutorial-dialog { width: 98vw; border-radius: 12px; }
  .tutorial-header { padding: 14px 16px 10px; }
  .tutorial-body { padding: 12px 14px 16px; }
  .tutorial-title { font-size: 1em; }
  .tutorial-content { font-size: 0.76em; }
  .tutorial-btn { padding: 7px 12px; font-size: 0.75em; }
  .btn-tutorial { padding: 7px 12px; font-size: 0.75em; }
}

/* ==================== 速成课程 ==================== */

.btn-course {
  padding: 10px 28px;
  border-radius: 22px;
  border: 1px solid rgba(136, 180, 240, 0.5);
  background: linear-gradient(135deg, rgba(80, 140, 220, 0.15), rgba(60, 120, 200, 0.05));
  color: #88bbff;
  font-size: 0.95em;
  font-family: inherit;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.3s;
  margin-left: 12px;
  white-space: nowrap;
}
.btn-course:hover {
  background: rgba(80, 140, 220, 0.25);
  box-shadow: 0 0 18px rgba(80, 140, 220, 0.25);
  border-color: rgba(136, 180, 240, 0.7);
  transform: translateY(-1px);
}

.course-dialog {
  max-width: 700px !important;
}

.course-phase-indicator {
  font-size: 0.78em;
  color: #88bbff;
  letter-spacing: 1px;
  padding: 2px 10px;
  border-radius: 10px;
  background: rgba(136, 180, 240, 0.08);
  border: 1px solid rgba(136, 180, 240, 0.2);
}

.course-card {
  background: rgba(136, 180, 240, 0.05);
  border: 1px solid rgba(136, 180, 240, 0.15);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 10px 0;
  text-align: left;
  line-height: 1.7;
}
.course-card h5 {
  color: #88bbff;
  font-size: 0.95em;
  margin-bottom: 6px;
}
.course-card ul, .course-card ol {
  padding-left: 20px;
  margin: 4px 0;
}
.course-card li {
  margin: 3px 0;
  font-size: 0.88em;
}
.course-card table {
  border-collapse: collapse;
  margin: 6px 0;
}
.course-card th {
  color: #aaa;
  font-size: 0.78em;
  padding: 3px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.course-card td {
  padding: 3px 6px;
  font-size: 0.8em;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

/* ==================== 悬停提示 Tooltip ==================== */

.tooltip-popup {
  position: fixed;
  z-index: 10001;
  max-width: 280px;
  padding: 10px 14px;
  background: linear-gradient(135deg, #1e2a3a, #1a2535);
  border: 1px solid rgba(160, 220, 140, 0.4);
  border-radius: 10px;
  color: #c8c8d0;
  font-size: 0.78em;
  line-height: 1.6;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55), 0 0 18px rgba(100, 200, 120, 0.08);
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.tooltip-popup.visible {
  opacity: 1;
  transform: translateY(0);
}

.tooltip-popup::after {
  content: '';
  position: absolute;
  top: -6px;
  left: 20px;
  width: 10px;
  height: 10px;
  background: #1e2a3a;
  border-left: 1px solid rgba(160, 220, 140, 0.4);
  border-top: 1px solid rgba(160, 220, 140, 0.4);
  transform: rotate(45deg);
}

@media (max-width: 768px) {
  .tooltip-popup {
    max-width: 220px;
    font-size: 0.72em;
    padding: 8px 12px;
  }
}

/* ==================== 格局展示 ==================== */
.patterns-container {
  padding: 12px;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
}
.patterns-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.pattern-card {
  display: flex;
  flex-direction: column;
  padding: 8px 12px;
  background: rgba(255,255,255,0.05);
  border-radius: 6px;
  cursor: help;
  min-width: 150px;
  transition: background 0.15s;
}
.pattern-card:hover {
  background: rgba(255,255,255,0.08);
}
.pattern-name {
  font-weight: 600;
  font-size: 0.9em;
  color: #e0d5c1;
}
.pattern-cat {
  font-size: 0.75em;
  margin-top: 2px;
}

/* ==================== 宫位评分 ==================== */
.scores-container {
  padding: 12px;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
}
.scores-grid {
  margin-top: 8px;
}
.score-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
  font-size: 0.85em;
}
.score-name {
  width: 50px;
  text-align: right;
  color: #aaa;
}
.score-bar-bg {
  flex: 1;
  height: 8px;
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
  overflow: hidden;
}
.score-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
}
.score-val {
  width: 60px;
  font-size: 0.75em;
  text-align: right;
}

/* ==================== 合盘 ==================== */
.synastry-panel select {
  font-size: 0.9em;
}

/* ==================== 三盘同参 ==================== */
.three-panel table {
  width: 100%;
  border-collapse: collapse;
}
.three-panel td, .three-panel th {
  border: 1px solid rgba(255,255,255,0.1);
  padding: 4px 6px;
  font-size: 0.82em;
  vertical-align: top;
}
.three-panel th {
  background: rgba(255,255,255,0.05);
}

/* ==================== 导出按钮 ==================== */
.detail-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ==================== 奇门遁甲面板 ==================== */
.qm-info {
  padding: 8px 12px;
  background: rgba(240,215,140,0.06);
  border-radius: 6px;
  margin-bottom: 12px;
  font-size: 0.85em;
  color: #b0a080;
  display: flex;
  gap: 8px;
}
.qm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  max-width: 480px;
  margin: 0 auto;
}
.qm-cell {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 10px 6px;
  text-align: center;
  min-height: 100px;
}
.qm-cell-center {
  background: rgba(240,215,140,0.06);
  border-color: rgba(240,215,140,0.2);
}
.qm-gong-name {
  font-size: 0.7em;
  color: #888;
  margin-bottom: 2px;
}
.qm-spirit {
  font-size: 0.78em;
  color: #f0d78c;
  font-weight: 600;
}
.qm-star {
  font-size: 0.85em;
  font-weight: 700;
}
.qm-door {
  font-size: 0.78em;
  color: #d4a84c;
  font-weight: 600;
}
.qm-qiyi {
  font-size: 0.9em;
  color: #c0b080;
}
.qm-gua-yi {
  font-size: 0.65em;
  color: #666;
  margin-top: 2px;
}
.qm-legend {
  margin-top: 12px;
  font-size: 0.78em;
  color: #9a8c6c;
}
.qm-legend-item {
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

/* ==================== 择日面板 ==================== */
.zr-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 12px;
}
.zr-controls label {
  color: #888;
  font-size: 0.82em;
}
.zr-num {
  background: rgba(0,0,0,0.3);
  color: #e0d080;
  border: 1px solid rgba(240,215,140,0.3);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.9em;
}
.zr-cal-header {
  font-size: 1.1em;
  color: #f0d78c;
  margin-bottom: 8px;
  font-weight: 700;
}
.zr-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  max-width: 700px;
}
.zr-day-header {
  text-align: center;
  font-size: 0.72em;
  color: #7a7c60;
  padding: 4px 0;
}
.zr-day {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 4px;
  padding: 6px 4px;
  text-align: center;
  cursor: default;
  min-height: 65px;
}
.zr-day-empty { background: transparent; border: none; }
.zr-day-ji { border-left: 3px solid #4caf50; background: rgba(76,175,80,0.05); }
.zr-day-xiong { border-left: 3px solid #e06040; background: rgba(224,96,64,0.05); }
.zr-day-today { border: 2px solid #f0d78c !important; }
.zr-day-match { background: rgba(240,215,140,0.08) !important; }
.zr-day-taboo { border-left: 3px solid #ff0000 !important; }
.zr-day-num { font-size: 1em; font-weight: 700; color: #ccc; }
.zr-day-lunar { font-size: 0.65em; color: #888; }
.zr-day-jc { font-size: 0.68em; color: #9a8c6c; font-weight: 600; }
.zr-day-gz { font-size: 0.62em; color: #666; }

/* ==================== 风水罗盘面板 ==================== */
.luopan-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}

/* ==================== 欢迎模式弹窗 ==================== */
.mode-welcome-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.78);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.35s ease;
  backdrop-filter: blur(4px);
}
.mode-welcome-box {
  background: linear-gradient(135deg, #1e1e36 0%, #252545 50%, #1a2a3a 100%);
  border: 1px solid rgba(240,215,140,0.2);
  border-radius: 16px;
  padding: 32px 28px 24px;
  max-width: 500px;
  width: 90%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(240,215,140,0.08);
  transition: max-width 0.4s ease;
}
.mode-welcome-box-wide {
  max-width: 620px;
}
.mode-welcome-title {
  font-size: 1.6em;
  color: #f0d78c;
  margin-bottom: 4px;
}
.mode-welcome-sub {
  color: #888;
  font-size: 0.9em;
  margin-bottom: 24px;
}
.mode-choice-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.mode-card {
  flex: 1;
  min-width: 180px;
  padding: 24px 16px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.25s ease;
  border: 2px solid transparent;
}
.mode-card-pro {
  background: rgba(96,144,208,0.08);
  border-color: rgba(96,144,208,0.25);
}
.mode-card-pro:hover {
  background: rgba(96,144,208,0.15);
  border-color: rgba(96,144,208,0.5);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(96,144,208,0.15);
}
.mode-card-nonpro {
  background: rgba(240,215,140,0.06);
  border-color: rgba(240,215,140,0.25);
}
.mode-card-nonpro:hover {
  background: rgba(240,215,140,0.12);
  border-color: rgba(240,215,140,0.5);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(240,215,140,0.15);
}
.mode-card-icon {
  font-size: 2.4em;
  margin-bottom: 8px;
}
.mode-card h3 {
  color: #e0d080;
  margin-bottom: 6px;
  font-size: 1.1em;
}
.mode-card p {
  color: #9a8c6c;
  font-size: 0.82em;
  line-height: 1.5;
}
.mode-style-title {
  color: #f0d78c;
  font-size: 1.1em;
  margin-bottom: 4px;
}
.mode-style-sub {
  color: #888;
  font-size: 0.82em;
  margin-bottom: 16px;
}
.mode-style-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}
.mode-style-card:hover {
  background: rgba(240,215,140,0.08);
  border-color: rgba(240,215,140,0.3);
  transform: translateX(4px);
}
.mode-style-icon {
  font-size: 1.8em;
  flex-shrink: 0;
  width: 44px;
  text-align: center;
}
.mode-style-info h4 {
  color: #e0d080;
  margin-bottom: 2px;
  font-size: 0.95em;
}
.mode-style-info p {
  color: #9a8c6c;
  font-size: 0.8em;
  line-height: 1.4;
  margin: 0;
}
.mode-style-example {
  color: #7a7c60 !important;
  font-style: italic;
  margin-top: 4px !important;
  font-size: 0.76em !important;
}
.mode-back-btn {
  background: none;
  color: #888;
  border: none;
  cursor: pointer;
  font-size: 0.8em;
}
.mode-back-btn:hover { color: #f0d78c; }
.mode-footer-hint {
  color: #555;
  font-size: 0.72em;
  margin-top: 16px;
}
.btn-mode {
  position: absolute;
  top: 12px;
  right: 84px;
  background: rgba(255,255,255,0.04);
  color: #aaa;
  border: 1px solid rgba(255,255,255,0.1);
  padding: 4px 10px;
  border-radius: 16px;
  cursor: pointer;
  font-size: 0.78em;
  transition: all 0.2s ease;
}
.btn-mode:hover {
  background: rgba(240,215,140,0.1);
  color: #f0d78c;
  border-color: rgba(240,215,140,0.3);
}

/* ==================== 模式差异化：隐藏高级功能 ==================== */
body.mode-nonpro .zm-btn[data-mode="feixing"],
body.mode-nonpro .zm-btn[data-mode="sihua"],
body.mode-nonpro .liu-btn[data-liu="liuri"],
body.mode-nonpro .liu-btn[data-liu="liushi"],
body.mode-nonpro .btn-ai { display: none; }

body.mode-nonpro .sp-detail { font-size: 0.95em; line-height: 1.7; }
body.mode-nonpro .sp-category { background: rgba(240,215,140,0.1); }

/* ==================== 欢迎弹窗（模式选择） ==================== */
.mode-welcome-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
}
.mode-welcome-box {
  background: linear-gradient(160deg, #1e1e3a 0%, #16213e 50%, #1a1a2e 100%);
  border: 1px solid rgba(240,215,140,0.25);
  border-radius: 16px;
  padding: 32px 28px;
  max-width: 520px;
  width: 90%;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
  transition: max-width 0.3s;
}
.mode-welcome-box-wide { max-width: 620px; }
.mode-welcome-title {
  text-align: center;
  color: #f0d78c;
  font-size: 1.5em;
  margin-bottom: 4px;
}
.mode-welcome-sub {
  text-align: center;
  color: #888;
  font-size: 0.9em;
  margin-bottom: 24px;
}
.mode-choice-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: column;
}
.mode-card {
  flex: 1;
  min-width: 180px;
  padding: 24px 18px;
  border-radius: 12px;
  cursor: pointer;
  text-align: center;
  border: 2px solid transparent;
  transition: all 0.25s;
  background: rgba(255,255,255,0.03);
}
.mode-card-pro { border-color: rgba(180,200,255,0.3); }
.mode-card-pro:hover { background: rgba(180,200,255,0.08); border-color: rgba(180,200,255,0.6); transform: translateY(-2px); }
.mode-card-nonpro { border-color: rgba(240,215,140,0.3); }
.mode-card-nonpro:hover { background: rgba(240,215,140,0.08); border-color: rgba(240,215,140,0.6); transform: translateY(-2px); }
.mode-card-icon { font-size: 2.2em; margin-bottom: 8px; }
.mode-card h3 { color: #f0d78c; font-size: 1.1em; margin-bottom: 8px; }
.mode-card p { color: #9a8c6c; font-size: 0.82em; line-height: 1.6; }
.mode-style-title { text-align: center; color: #f0d78c; font-size: 1.1em; margin-bottom: 4px; width: 100%; }
.mode-style-sub { text-align: center; color: #888; font-size: 0.82em; margin-bottom: 16px; width: 100%; }
.mode-style-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px;
  border-radius: 10px;
  cursor: pointer;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  transition: all 0.2s;
  margin-bottom: 8px;
}
.mode-style-card:hover { background: rgba(240,215,140,0.06); border-color: rgba(240,215,140,0.25); }
.mode-style-icon { font-size: 1.6em; flex-shrink: 0; }
.mode-style-info h4 { color: #d4a84c; font-size: 0.95em; margin-bottom: 2px; }
.mode-style-info p { color: #888; font-size: 0.78em; margin-bottom: 4px; }
.mode-style-example { color: #7a7c60 !important; font-size: 0.75em !important; font-style: italic; }
.mode-back-btn {
  display: block;
  margin: 8px auto 0;
  background: transparent;
  color: #888;
  border: 1px solid rgba(255,255,255,0.1);
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.82em;
}
.mode-back-btn:hover { color: #ccc; border-color: rgba(255,255,255,0.2); }
.mode-footer-hint { text-align: center; color: #555; font-size: 0.72em; margin-top: 16px; }

/* ==================== 教程/课程弹窗 ==================== */
.tutorial-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.tutorial-dialog {
  background: linear-gradient(145deg, #1e1e3a 0%, #1a1a2e 100%);
  border: 1px solid rgba(240,215,140,0.25);
  border-radius: 16px;
  width: min(620px, 92vw);
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  pointer-events: auto;
}
.course-dialog {
  width: min(680px, 94vw);
  max-height: 88vh;
}
.tutorial-header {
  display: flex;
  align-items: center;
  padding: 16px 20px 8px;
  gap: 10px;
  position: sticky;
  top: 0;
  background: linear-gradient(145deg, #1e1e3a 0%, #1a1a2e 100%);
  z-index: 1;
  border-bottom: 1px solid rgba(240,215,140,0.08);
}
.tutorial-close {
  background: none;
  border: none;
  color: #888;
  font-size: 1.4em;
  cursor: pointer;
  margin-left: auto;
  padding: 4px 8px;
  border-radius: 6px;
}
.tutorial-close:hover { color: #e06040; }
.tutorial-step-indicator {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.tutorial-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  cursor: pointer;
  transition: all 0.2s;
}
.tutorial-dot.active { background: #f0d78c; transform: scale(1.3); }
.tutorial-dot.done { background: rgba(240,215,140,0.4); }
.tutorial-body { padding: 16px 24px 8px; }
.tutorial-emoji { font-size: 2em; text-align: center; margin-bottom: 6px; }
.tutorial-title {
  font-size: 1.2em;
  color: #f0d78c;
  text-align: center;
  margin-bottom: 14px;
}
.tutorial-content { color: #ccc; line-height: 1.8; font-size: 0.9em; }
.tutorial-content p { margin-bottom: 10px; }
.tutorial-content strong { color: #f0d78c; }
.tutorial-content mark {
  background: rgba(240,215,140,0.15);
  color: #f0d78c;
  padding: 1px 5px;
  border-radius: 3px;
}
.tutorial-content em { color: #d4a84c; }
.tutorial-content ol, .tutorial-content ul { margin: 6px 0 12px 20px; }
.tutorial-content li { margin-bottom: 3px; }
.tutorial-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px 18px;
  gap: 12px;
}
.tutorial-progress { color: #666; font-size: 0.8em; }
.tutorial-btn {
  padding: 8px 18px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.04);
  color: #ccc;
  cursor: pointer;
  font-size: 0.88em;
  transition: all 0.2s;
}
.tutorial-btn:hover { background: rgba(240,215,140,0.1); border-color: rgba(240,215,140,0.35); color: #f0d78c; }
.tutorial-btn-finish {
  background: rgba(240,215,140,0.15);
  border-color: rgba(240,215,140,0.4);
  color: #f0d78c;
  font-weight: 700;
}
.tutorial-btn-finish:hover { background: rgba(240,215,140,0.25); }
.tutorial-highlight {
  box-shadow: 0 0 0 4px rgba(240,215,140,0.45);
  border-radius: 12px;
  position: relative;
  z-index: 9000;
}

/* ==================== 速成课程卡片 ==================== */
.course-phase-indicator {
  font-size: 0.78em;
  color: #d4a84c;
  background: rgba(240,215,140,0.06);
  padding: 3px 10px;
  border-radius: 12px;
  white-space: nowrap;
}
.btn-course {
  background: linear-gradient(135deg, rgba(212,168,76,0.15), rgba(240,215,140,0.08));
  border: 1px solid rgba(240,215,140,0.35);
  color: #f0d78c;
  font-size: 0.88em;
  padding: 7px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-course:hover {
  background: linear-gradient(135deg, rgba(212,168,76,0.25), rgba(240,215,140,0.15));
  border-color: rgba(240,215,140,0.6);
  transform: translateY(-1px);
}

/* 课程内卡片 */
.course-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(240,215,140,0.1);
  border-left: 3px solid rgba(240,215,140,0.4);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.course-card h5 {
  color: #d4a84c;
  font-size: 0.92em;
  margin-bottom: 6px;
}
.course-card ul, .course-card ol { margin: 4px 0 0 18px; font-size: 0.88em; }
.course-card li { margin-bottom: 2px; color: #bbb; }
.course-card p { font-size: 0.88em; }
.course-card table { border-collapse: collapse; margin-top: 4px; }
.course-card table th, .course-card table td {
  border: 1px solid rgba(255,255,255,0.08);
  padding: 5px 8px;
  text-align: center;
  font-size: 0.85em;
}
.course-card table th { background: rgba(240,215,140,0.08); color: #d4a84c; }
.course-card pre {
  background: rgba(0,0,0,0.25);
  border-radius: 6px;
  padding: 8px 12px;
  margin: 6px 0;
  overflow-x: auto;
}

/* ==================== AI 对话面板 ==================== */
.ai-chat-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 85vh;
  background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
  border-top: 2px solid rgba(240,215,140,0.3);
  box-shadow: 0 -10px 40px rgba(0,0,0,0.5);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideUp 0.3s ease;
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

.ai-chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background: rgba(240,215,140,0.06);
  border-bottom: 1px solid rgba(240,215,140,0.1);
  flex-wrap: wrap;
  gap: 8px;
}
.ai-chat-header h3 { color: #f0d78c; margin: 0; font-size: 1.1em; }
.ai-provider-badge {
  font-size: 0.65em;
  background: rgba(240,215,140,0.15);
  padding: 2px 8px;
  border-radius: 10px;
  color: #c9a84c;
  margin-left: 8px;
}
.ai-chat-header-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.ai-quick-questions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 16px;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid rgba(240,215,140,0.06);
}
.ai-quick-btn {
  padding: 5px 12px;
  border-radius: 14px;
  border: 1px solid rgba(240,215,140,0.2);
  background: rgba(240,215,140,0.06);
  color: #d4a84c;
  font-size: 0.8em;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.ai-quick-btn:hover {
  background: rgba(240,215,140,0.15);
  border-color: rgba(240,215,140,0.4);
}

.ai-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  max-height: 50vh;
}
.ai-msg { margin-bottom: 14px; padding: 10px 14px; border-radius: 10px; line-height: 1.7; font-size: 0.9em; }
.ai-msg-user { background: rgba(91,155,213,0.12); border-left: 3px solid #5b9bd5; color: #c8dcff; }
.ai-msg-assistant { background: rgba(240,215,140,0.06); border-left: 3px solid #c9a84c; color: #e0d5c1; }
.ai-msg-system { background: rgba(255,255,255,0.03); color: #888; font-size: 0.85em; text-align: center; }
.ai-msg h3 { color: #d4a84c; margin: 8px 0 4px; font-size: 1em; }
.ai-msg h4 { color: #c9a84c; margin: 6px 0 2px; font-size: 0.9em; }

.ai-input-row {
  display: flex;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid rgba(240,215,140,0.1);
  background: rgba(0,0,0,0.2);
}
.ai-input-row textarea {
  flex: 1;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid rgba(240,215,140,0.2);
  background: rgba(0,0,0,0.3);
  color: #f0d78c;
  font-size: 0.9em;
  font-family: inherit;
  resize: none;
  outline: none;
}
.ai-input-row textarea:focus { border-color: rgba(240,215,140,0.4); }
.ai-input-row .btn { align-self: flex-end; }

.ai-status-bar {
  padding: 6px 20px;
  font-size: 0.8em;
  color: #9a8c6c;
  text-align: center;
  background: rgba(0,0,0,0.1);
}

/* AI 配置面板 */
.ai-config-wrap {
  padding: 16px 20px;
  border-top: 1px solid rgba(240,215,140,0.1);
  max-height: 300px;
  overflow-y: auto;
}
.ai-config-panel { }
.ai-config-panel h3 { color: #f0d78c; margin-bottom: 12px; }
.ai-config-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.ai-config-row label { color: #9a8c6c; font-size: 0.85em; min-width: 80px; }
.ai-config-row input, .ai-config-row select {
  flex: 1;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid rgba(240,215,140,0.2);
  background: rgba(0,0,0,0.3);
  color: #f0d78c;
  font-family: inherit;
  font-size: 0.85em;
}
.ai-config-row select option { background: #1a1a2e; color: #e0d5c1; }
.ai-config-actions { display: flex; gap: 8px; margin: 12px 0; }
.ai-config-hint { font-size: 0.75em; color: #7a7c60; line-height: 1.6; }
.ai-config-hint a { color: #c9a84c; }

.btn-ai-chat {
  background: linear-gradient(135deg, rgba(139,195,74,0.15), rgba(139,195,74,0.05));
  border-color: rgba(139,195,74,0.3);
  color: #8bc34a;
}

/* ==================== 数据图表面板 ==================== */
.chart-analysis-panel {
  background: rgba(255,255,255,0.03);
  border-radius: 12px;
  border: 1px solid rgba(240,215,140,0.15);
  padding: 20px;
}
.chart-analysis-section {
  margin-bottom: 24px;
  text-align: center;
}
.chart-analysis-title {
  color: #f0d78c;
  font-size: 1em;
  margin-bottom: 12px;
  letter-spacing: 1px;
}
.chart-analysis-section canvas {
  border-radius: 8px;
}
.btn-chart-analysis {
  background: linear-gradient(135deg, rgba(167,139,250,0.15), rgba(167,139,250,0.05));
  border-color: rgba(167,139,250,0.3);
  color: #a78bfa;
}

/* ==================== 叠盘可视化 ==================== */
.overlay-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 8px 0;
  font-size: 0.8em;
  color: #9a8c6c;
}
.overlay-legend-item { display: flex; align-items: center; gap: 4px; }
.overlay-legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.overlay-legend-dot.benming { background: #f0d78c; }
.overlay-legend-dot.daxian { background: #5b9bd5; }
.overlay-legend-dot.liunian { background: #8bc34a; }
.overlay-legend-dot.liuyue { background: #ff9800; }

/* ==================== 飞星/三合/四化模式 ==================== */
.palace-cell.feixing-mode {
  border-color: rgba(139,195,74,0.15);
}
.palace-cell.feixing-mode .sihua-badge.centrifugal {
  border-color: #ff9800 !important;
}
.palace-cell.feixing-mode .sihua-badge.centripetal {
  border-color: #5b9bd5 !important;
}

.palace-cell.sihua-mode {
  border-color: rgba(167,139,250,0.2);
}
.palace-cell.sihua-mode .star-item:not(:has(.sihua-badge)) {
  opacity: 0.45;
}
.palace-cell.sihua-mode .sihua-badge {
  box-shadow: 0 0 6px currentColor;
}

@keyframes pulseDown {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(2px); opacity: 0.7; }
}
@keyframes pulseUp {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(-2px); opacity: 0.7; }
}

/* ==================== 星曜亮度颜色增强 ==================== */
.star-brightness.miao { background: #d4a84c; color: #1a1a2e; font-weight: 700; }
.star-brightness.wang { background: #c9a84c; color: #1a1a2e; }
.star-brightness.de { background: rgba(201,168,76,0.25); color: #d4a84c; }
.star-brightness.li { background: rgba(201,168,76,0.15); color: #b89840; }
.star-brightness.ping { background: rgba(180,180,180,0.12); color: #999; }
.star-brightness.bu { background: rgba(224,96,80,0.12); color: #e08070; }
.star-brightness.xian { background: rgba(224,96,80,0.18); color: #e06050; font-weight: 600; }

/* 煞星高亮 */
.star-item.aux-star:has(.star-item-name) .star-item-name {
  color: #c0b080;
}

/* ==================== 宫位评分颜色 ==================== */
.palace-score-bar { height: 4px; border-radius: 2px; margin-top: 2px; transition: width 0.5s; }
.palace-score-bar.high { background: linear-gradient(90deg, #8bc34a, #6ba832); }
.palace-score-bar.mid { background: linear-gradient(90deg, #ff9800, #e08800); }
.palace-score-bar.low { background: linear-gradient(90deg, #e06050, #c04030); }

/* ==================== 响应式 ==================== */
@media (max-width: 768px) {
  .ai-chat-header { flex-direction: column; }
  .ai-chat-header-actions { justify-content: center; }
  .ai-quick-questions { justify-content: center; }
  .chart-analysis-section canvas { max-width: 100% !important; }
}

/* ==================== 暗色滚动条 ==================== */
.ai-messages::-webkit-scrollbar { width: 6px; }
.ai-messages::-webkit-scrollbar-track { background: transparent; }
.ai-messages::-webkit-scrollbar-thumb { background: rgba(240,215,140,0.2); border-radius: 3px; }

/* ==================== AI 设置向导 ==================== */
.aguide-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.aguide-dialog {
  background: linear-gradient(170deg, #1e2a3a 0%, #1a1a2e 100%);
  border: 1px solid rgba(240,215,140,0.25);
  border-radius: 20px;
  width: 92vw;
  max-width: 640px;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  animation: scaleIn 0.25s ease;
}
@keyframes scaleIn { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.aguide-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px 0;
}
.aguide-step-dots { display: flex; gap: 6px; }
.aguide-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(240,215,140,0.15);
  cursor: pointer;
  transition: all 0.2s;
}
.aguide-dot.active { background: #d4a84c; box-shadow: 0 0 8px rgba(212,168,76,0.5); }
.aguide-dot.done { background: rgba(139,195,74,0.6); }
.aguide-close {
  background: transparent;
  border: none;
  color: #777;
  font-size: 1.3em;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: color 0.2s;
}
.aguide-close:hover { color: #e0c080; }

.aguide-body { padding: 16px 24px 8px; }
.aguide-emoji { font-size: 2.2em; text-align: center; }
.aguide-title {
  text-align: center;
  color: #f0d78c;
  font-size: 1.3em;
  margin: 8px 0 16px;
  letter-spacing: 2px;
}
.aguide-content { color: #c0b8a0; font-size: 0.92em; line-height: 1.9; }
.aguide-content p { margin: 6px 0; }
.aguide-content strong { color: #e0c880; }
.aguide-content mark { background: rgba(240,215,140,0.15); color: #f0d78c; padding: 1px 4px; border-radius: 3px; }
.aguide-content code { background: rgba(0,0,0,0.3); color: #d4a84c; padding: 1px 6px; border-radius: 4px; font-size: 0.88em; }

.aguide-link {
  color: #8bc34a;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.aguide-link:hover { color: #a0e050; }

.aguide-step-num {
  display: inline-block;
  background: linear-gradient(135deg, rgba(240,215,140,0.2), rgba(240,215,140,0.05));
  border: 1px solid rgba(240,215,140,0.25);
  color: #d4a84c;
  padding: 3px 12px;
  border-radius: 12px;
  font-size: 0.85em;
  font-weight: 700;
  margin: 8px 0 2px;
}

.aguide-warning {
  margin: 12px 0;
  padding: 12px 16px;
  background: rgba(224,160,80,0.08);
  border: 1px solid rgba(224,160,80,0.2);
  border-radius: 10px;
  font-size: 0.82em;
  line-height: 1.7;
  color: #c0a060;
}

.aguide-tip {
  margin: 12px 0;
  padding: 10px 16px;
  background: rgba(139,195,74,0.06);
  border: 1px solid rgba(139,195,74,0.15);
  border-radius: 10px;
  color: #9ab870;
  font-size: 0.82em;
}

.aguide-faq {
  margin-top: 16px;
  padding: 14px 18px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
}
.aguide-faq h4 { color: #d4a84c; margin-bottom: 10px; font-size: 1em; }
.aguide-faq p { font-size: 0.85em; margin: 8px 0; line-height: 1.7; }
.aguide-faq b { color: #d0c090; }

.aguide-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px 20px;
  gap: 10px;
}
.aguide-progress { color: #666; font-size: 0.8em; }
.aguide-btn {
  padding: 9px 22px;
  border-radius: 8px;
  border: 1px solid rgba(240,215,140,0.25);
  background: rgba(240,215,140,0.08);
  color: #d4a84c;
  font-size: 0.9em;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 1px;
  transition: all 0.2s;
}
.aguide-btn:hover { background: rgba(240,215,140,0.18); border-color: rgba(240,215,140,0.4); }
.aguide-btn-next { background: linear-gradient(135deg, rgba(201,168,76,0.3), rgba(160,132,44,0.2)); }
.aguide-btn-finish {
  background: linear-gradient(135deg, rgba(139,195,74,0.25), rgba(100,160,30,0.15));
  border-color: rgba(139,195,74,0.35);
  color: #8bc34a;
}
.aguide-highlight {
  outline: 3px solid rgba(212,168,76,0.6);
  outline-offset: 4px;
  border-radius: 8px;
  animation: hlPulse 1.5s ease-in-out infinite;
  z-index: 9999;
  position: relative;
}
@keyframes hlPulse {
  0%, 100% { outline-color: rgba(212,168,76,0.4); }
  50% { outline-color: rgba(212,168,76,0.9); }
}

/* 供应商卡片 */
.aguide-provider-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0;
}
.aguide-pcard {
  flex: 1;
  min-width: 170px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(240,215,140,0.12);
  border-radius: 12px;
  padding: 14px;
  text-align: center;
  position: relative;
}
.aguide-pcard.recommend { border-color: rgba(139,195,74,0.3); background: rgba(139,195,74,0.04); }
.aguide-pcard h4 { color: #d4a84c; font-size: 0.95em; margin-bottom: 8px; }
.aguide-pcard p { font-size: 0.8em; line-height: 1.6; color: #a09880; }
.aguide-pcard-badge {
  position: absolute;
  top: -10px;
  right: -2px;
  background: linear-gradient(135deg, #8bc34a, #6ba832);
  color: #fff;
  font-size: 0.7em;
  padding: 2px 10px;
  border-radius: 10px;
  font-weight: 700;
}
.aguide-pcard-price { color: #7a8c60; font-size: 0.75em; margin-top: 8px; }

/* 在 AI 聊天面板中显示引导按钮 */
.ai-chat-guide-btn {
  background: linear-gradient(135deg, rgba(139,195,74,0.12), rgba(139,195,74,0.04));
  border-color: rgba(139,195,74,0.25);
  color: #8bc34a;
  font-size: 0.8em;
}

/* 全局错误边界动画 */
@keyframes errorToastIn {
  from { opacity: 0; transform: translate(-50%,-50%) scale(0.9); }
  to   { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}

/* 命例库搜索 */
.cases-search { padding: 8px 12px; }
.cases-search input {
  width: 100%; padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05); color: #fff; font-size: 13px; outline: none;
}
.cases-search input:focus { border-color: rgba(139,195,74,.5); }

/* 小限面板 */
.timeline-panel table th { padding: 6px 8px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 12px; color: #aaa; }
.timeline-panel table td { padding: 6px 8px; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,.04); }

/* 功能指南面板 */
.guide-intro { padding: 16px 20px; background: rgba(139,195,74,.06); border-radius: 10px; margin-bottom: 16px; }
.guide-intro p { margin: 4px 0; font-size: 14px; color: #bbb; line-height: 1.6; }
.guide-section { margin-bottom: 8px; border-radius: 10px; overflow: hidden; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); }
.guide-section-header {
  display: flex; align-items: center; gap: 10px; padding: 14px 18px;
  cursor: pointer; user-select: none; transition: background .2s;
}
.guide-section-header:hover { background: rgba(255,255,255,.04); }
.guide-section-icon   { font-size: 20px; flex-shrink: 0; }
.guide-section-title  { font-size: 15px; font-weight: 600; color: #ddd; flex: 1; }
.guide-section-arrow  { font-size: 11px; color: #888; transition: transform .25s; }
.guide-section.open .guide-section-arrow { transform: rotate(180deg); }
.guide-section-body {
  display: none; padding: 0 18px 16px 18px;
  border-top: 1px solid rgba(255,255,255,.05);
}
.guide-section.open .guide-section-body { display: block; }
.guide-item { margin-top: 14px; }
.guide-item-subtitle { font-size: 13px; font-weight: 600; color: #8bc34a; margin-bottom: 4px; }
.guide-item-text { font-size: 13px; color: #aaa; line-height: 1.7; }
.guide-item-text b { color: #ddd; }

/* 帮助按钮 */
.btn-help {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06); color: #ccc; font-size: 15px; cursor: pointer;
  transition: all .2s; display: flex; align-items: center; justify-content: center;
}
.btn-help:hover { background: rgba(255,255,255,.12); color: #fff; }

/* === 三方四正 === */
.triad-info-bar {
  padding: 10px 14px; margin-top: 8px; border-radius: 10px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  font-size: 13px; gap: 10px; align-items: center; flex-wrap: wrap; color: #bbb;
}
.triad-label { color: #888; font-weight: 600; }
.triad-name { color: #8bc34a; font-weight: 600; }
.triad-name.triad-opp { color: #ff9800; }
.triad-name.triad-anh { color: #9c27b0; }
.triad-divider { color: rgba(255,255,255,.12); }
.triad-click { color: #666; font-size: 12px; font-weight: 400; }
.palace-cell.triad-highlight { box-shadow: inset 0 0 0 2px #8bc34a; background: rgba(139,195,74,.08); }
.palace-cell.triad-opposite { box-shadow: inset 0 0 0 2px #ff9800; background: rgba(255,152,0,.06); }
.palace-cell.triad-anhe { box-shadow: inset 0 0 0 2px #9c27b0; background: rgba(156,39,176,.06); }

/* === 八字高级面板 === */
.bazi-adv-wrap { padding: 12px 0; }
.bazi-adv-section { margin-bottom: 20px; }
.bazi-adv-section h4 { font-size: 14px; color: #ddd; margin-bottom: 10px; }
.bazi-shishen-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.bazi-shishen-table th, .bazi-shishen-table td { padding: 7px 8px; text-align: center; border-bottom: 1px solid rgba(255,255,255,.06); }
.bazi-shishen-table th { color: #aaa; font-weight: 500; }
.bazi-shishen-table .ss-label { color: #888; width: 50px; text-align: right; }
.bazi-shishen-table .ss-day { color: #8bc34a; font-weight: 600; }
.bazi-shishen-table .ss-val { color: #cde; font-size: 12px; }
.bazi-shishen-table .ss-cang { color: #777; font-size: 11px; }
.yongshen-card { background: rgba(255,255,255,.04); border-radius: 10px; padding: 14px; }
.yongshen-item { display: flex; gap: 12px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.04); }
.yongshen-item:last-child { border: none; }
.ys-label { color: #888; font-weight: 600; min-width: 56px; flex-shrink: 0; }
.ys-val { color: #ccc; }
.ys-val.ys-good { color: #8bc34a; }
.ys-val.ys-bad { color: #e06050; }
.ys-val.ys-desc { color: #999; font-size: 12px; }

/* === 五行强弱条 === */
.wuxing-bars { display: flex; flex-direction: column; gap: 6px; }
.wx-bar-row { display: flex; align-items: center; gap: 10px; }
.wx-name { color: #bbb; font-size: 13px; width: 24px; text-align: center; }
.wx-bar-track { flex: 1; height: 14px; background: rgba(255,255,255,.06); border-radius: 7px; overflow: hidden; }
.wx-bar-fill { height: 100%; border-radius: 7px; transition: width .3s; }
.wx-bar-fill.wx-木 { background: #4caf50; }
.wx-bar-fill.wx-火 { background: #f44336; }
.wx-bar-fill.wx-土 { background: #ff9800; }
.wx-bar-fill.wx-金 { background: #ffc107; }
.wx-bar-fill.wx-水 { background: #2196f3; }
.wx-score { color: #ddd; font-size: 12px; width: 28px; text-align: right; }
.wx-summary { margin-top: 10px; font-size: 13px; color: #aaa; }

/* === 本地 AI 面板 === */
.btn-ai {
  display: flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 20px;
  border: 1px solid rgba(139,195,74,.3); background: rgba(139,195,74,.08);
  color: #8bc34a; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .2s;
}
.btn-ai:hover { background: rgba(139,195,74,.16); }
.ai-status-badge {
  font-size: 10px; padding: 2px 8px; border-radius: 10px; font-weight: 600; white-space: nowrap;
}
.ai-status-badge.ai-idle    { background: rgba(255,255,255,.06); color: #888; }
.ai-status-badge.ai-loading { background: rgba(255,152,0,.15);  color: #ff9800; }
.ai-status-badge.ai-ready   { background: rgba(139,195,74,.15); color: #8bc34a; }
.ai-status-badge.ai-error   { background: rgba(244,67,54,.15);  color: #f44336; }

.ai-local-panel {
  position: fixed; top: 0; right: 0; width: 420px; max-width: 100vw; height: 100vh;
  background: #141420; border-left: 1px solid rgba(255,255,255,.08);
  z-index: 1001; display: flex; flex-direction: column; overflow: hidden;
  animation: slideInRight .25s ease;
}
@keyframes slideInRight {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
.ai-local-header {
  padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.06);
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.ai-local-header h3 { margin: 0; font-size: 16px; color: #8bc34a; }
.ai-local-subtitle { font-size: 11px; color: #666; margin-left: auto; }
.ai-model-bar {
  padding: 10px 18px; display: flex; gap: 8px; align-items: center; flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.ai-model-select {
  flex: 1; padding: 7px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05); color: #ddd; font-size: 12px; outline: none;
}
.ai-progress-bar {
  margin: 0 18px; height: 4px; background: rgba(255,255,255,.06); border-radius: 2px;
  overflow: hidden; flex-shrink: 0;
}
.ai-progress-fill {
  height: 100%; background: linear-gradient(90deg, #8bc34a, #ff9800); border-radius: 2px;
  transition: width .3s; width: 0%;
}
.ai-progress-text { padding: 4px 18px; font-size: 11px; color: #888; flex-shrink: 0; }
.ai-kb-bar { padding: 10px 18px; display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.ai-kb-label { font-size: 13px; color: #aaa; font-weight: 600; }
.ai-kb-list { padding: 0 18px 8px; flex-shrink: 0; max-height: 120px; overflow-y: auto; }
.ai-kb-empty { color: #555; font-size: 12px; text-align: center; padding: 10px 0; }
.ai-kb-empty small { color: #444; }
.ai-kb-item {
  display: flex; align-items: center; gap: 8px; padding: 5px 8px;
  background: rgba(255,255,255,.03); border-radius: 6px; margin-bottom: 4px; font-size: 12px;
}
.ai-kb-title { color: #8bc34a; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-kb-meta { color: #666; flex-shrink: 0; }
.ai-kb-del { background: none; border: none; color: #e06050; cursor: pointer; font-size: 13px; padding: 0 4px; }
.ai-kb-section-header {
  font-size: 12px; color: #999; padding: 8px 0 4px; font-weight: 600;
  border-top: 1px solid rgba(255,255,255,.05); margin-top: 4px;
}
.ai-kb-section-header:first-child { border-top: none; margin-top: 0; }
.ai-kb-builtin { opacity: .7; }
.ai-kb-loaded { color: #8bc34a; font-size: 11px; }
.ai-kb-loading { color: #ff9800; font-size: 11px; animation: ai-pulse 1.5s infinite; }
.ai-kb-more { font-size: 11px; color: #555; text-align: center; padding: 2px 0; }
@keyframes ai-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

.ai-chat-messages {
  flex: 1; overflow-y: auto; padding: 14px 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.ai-msg { max-width: 92%; padding: 10px 14px; border-radius: 12px; font-size: 13px; line-height: 1.6; word-break: break-word; }
.ai-msg-user {
  align-self: flex-end; background: rgba(139,195,74,.12); color: #cde;
  border-bottom-right-radius: 4px;
}
.ai-msg-assistant {
  align-self: flex-start; background: rgba(255,255,255,.05); color: #ccc;
  border-bottom-left-radius: 4px;
}
.ai-msg-system {
  align-self: center; background: none; color: #666; font-size: 12px; padding: 4px 10px;
}
.ai-chat-input-bar {
  padding: 10px 18px; border-top: 1px solid rgba(255,255,255,.06);
  display: flex; gap: 8px; align-items: flex-end; flex-shrink: 0;
}
.ai-chat-input-bar textarea {
  flex: 1; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05); color: #ddd; font-size: 13px; resize: none; outline: none;
  font-family: inherit;
}
.ai-chat-input-bar textarea:focus { border-color: rgba(139,195,74,.4); }

/* 移动端适配 */
@media (max-width: 480px) {
  .ai-local-panel { width: 100vw; }
}

/* 三方四正高亮 */
.palace-cell { transition: outline .2s, box-shadow .2s; cursor: pointer; }
.palace-cell.triad-highlight { outline: 2px solid #ffcc00; outline-offset: 2px; box-shadow: 0 0 12px rgba(255,200,0,.3); }
.palace-cell.triad-opposite { outline: 2px solid #ff6600; outline-offset: 2px; box-shadow: 0 0 8px rgba(255,100,0,.25); }
.palace-cell.triad-anhe { outline: 2px solid #cc88ff; outline-offset: 2px; box-shadow: 0 0 8px rgba(200,136,255,.25); }

.triad-info-bar {
  padding: 10px 14px; margin-top: 10px; border-radius: 8px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  font-size: 13px; color: #bbb; gap: 8px; align-items: center; flex-wrap: wrap;
}
.triad-label { color: #888; }
.triad-name { font-weight: 600; color: #ddd; }
.triad-name.triad-opp { color: #ff6600; }
.triad-name.triad-anh { color: #cc88ff; }
.triad-divider { color: rgba(255,255,255,.1); }
.triad-click { color: #666; font-style: italic; font-size: 11px; }

/* 八字高级面板 */
.bazi-adv-wrap { display: flex; flex-direction: column; gap: 16px; }
.bazi-adv-section h4 { font-size: 15px; margin-bottom: 10px; color: #ddd; }
.bazi-shishen-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.bazi-shishen-table th, .bazi-shishen-table td {
  padding: 8px 10px; border: 1px solid rgba(255,255,255,.06); text-align: center;
}
.bazi-shishen-table th { color: #888; font-weight: 500; }
.bazi-shishen-table .ss-label { color: #8bc34a; font-weight: 600; text-align: left; }
.bazi-shishen-table .ss-day { background: rgba(139,195,74,.08); }
.bazi-shishen-table .ss-val { font-weight: 600; color: #ddd; }
.bazi-shishen-table .ss-cang { font-size: 11px; color: #999; }

.yongshen-card { padding: 14px; background: rgba(255,255,255,.03); border-radius: 10px; border: 1px solid rgba(255,255,255,.06); }
.yongshen-item { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.03); }
.yongshen-item:last-child { border-bottom: none; }
.ys-label { color: #888; font-size: 13px; min-width: 55px; }
.ys-val { color: #ddd; font-size: 14px; font-weight: 500; }
.ys-good { color: #8bc34a; }
.ys-bad { color: #e06050; }
.ys-desc { font-size: 13px; color: #aaa; font-weight: 400; }

.wuxing-bars { display: flex; flex-direction: column; gap: 8px; }
.wx-bar-row { display: flex; align-items: center; gap: 10px; }
.wx-name { width: 24px; font-size: 13px; color: #ccc; text-align: center; }
.wx-bar-track { flex: 1; height: 10px; background: rgba(255,255,255,.06); border-radius: 5px; overflow: hidden; }
.wx-bar-fill { height: 100%; border-radius: 5px; transition: width .4s ease; }
.wx-木 { background: linear-gradient(90deg, #4caf50, #8bc34a); }
.wx-火 { background: linear-gradient(90deg, #f44336, #ff5722); }
.wx-土 { background: linear-gradient(90deg, #ff9800, #ffc107); }
.wx-金 { background: linear-gradient(90deg, #ffeb3b, #fdd835); }
.wx-水 { background: linear-gradient(90deg, #2196f3, #03a9f4); }
.wx-score { width: 28px; font-size: 12px; color: #aaa; text-align: right; }
.wx-summary { margin-top: 10px; font-size: 13px; color: #aaa; }

/* 四化飞星图 */
.sihua-chart-inner { position: relative; background: #1a1a2e; border-radius: 16px; padding: 24px; max-width: 560px; max-height: 90vh; overflow-y: auto; }
.sihua-legend { display: flex; gap: 10px; justify-content: center; margin-bottom: 12px; }
.sihua-leg { padding: 2px 10px; border-radius: 10px; font-size: 12px; font-weight: 600; }
.sihua-lu { background: rgba(76,175,80,.2); color: #4caf50; }
.sihua-quan { background: rgba(255,152,0,.2); color: #ff9800; }
.sihua-ke { background: rgba(33,150,243,.2); color: #2196f3; }
.sihua-ji { background: rgba(244,67,54,.2); color: #f44336; }
.sihua-svg { width: 100%; height: auto; margin-top: 8px; }
.sihua-gong-text { fill: rgba(255,255,255,.5); font-size: 12px; }
.sihua-label { font-weight: 700; }