/* ══════════════════════════════════
   CHART SCREEN
══════════════════════════════════ */
#chart-screen {
  display: none;
  padding: 24px 24px 12px;
  max-width: 1120px;
  margin: 0 auto;
  overflow-x: hidden; /* 防止子元素撐破整頁寬度 */
}
#chart-screen-bg {
  background: var(--bg);
  display: none;
}


.chart-body { padding: 0 24px; }

/* ══════════════════════════════════
   TYPOGRAPHY SCALE
   H1 section-title  : 18px 700
   H2 chip-label/th  : 13px 700 uppercase
   Body value        : 17px 700  (info-chip-val)
   Body content      : 15px 400  (td, center-val)
   Small             : 12px 400  (age, note)
══════════════════════════════════ */

/* ── Chart Hero ── */
.chart-hero {
  margin-bottom: 20px;
}
.chart-hero-info {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.chart-hero-info .info-chip {
  flex: 1;
  min-width: 140px;
}
/* 宮格互動提示（標題旁） */
.palace-hint {
  font-size: inherit;
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: 400;
}
@media (max-width: 768px) {
  .palace-hint { font-size: 14px; }
}

/* Info strip */
.info-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 0;
}
.info-chip {
  flex: 1;
  min-width: 140px;
  background: var(--bg-card);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: var(--shadow);
}
.info-chip-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.02em;
  margin-bottom: 4px;
  font-family: var(--font-sans);
}
.info-chip-val {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text);
  font-family: var(--font-sans);
  line-height: 1.4;
}
.info-chip-val.gold  { color: var(--accent); }
.info-chip-val.teal  { color: var(--teal); }
.info-chip-val.navy  { color: var(--primary); }

/* ══════════════════════════════════
   PALACE GRID
══════════════════════════════════ */
.palace-grid-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* iOS 慣性捲動 */
  margin: 0 -4px; /* 補齊邊緣 */
}
.palace-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  grid-template-rows: repeat(4, auto);
  gap: 3px;
  min-width: 640px;
  border: 2px solid var(--navy);
  border-radius: 12px;
  overflow: hidden;
  background: var(--navy);
  box-shadow: var(--shadow);
}

.palace {
  background: var(--bg-card);
  padding: 11px 10px;
  min-height: 160px;
  min-width: 0;
  position: relative;
}
.palace.is-ming    { background: var(--gold-pale); }
.palace.is-shen    { background: var(--mint-pale); }
.palace.is-ming.is-shen { background: linear-gradient(135deg, var(--gold-pale) 50%, var(--mint-pale) 100%); }
.palace.is-dalimit { background: #EEF2FB; }
.palace { cursor: pointer; transition: outline 0.15s; }
.palace:hover { outline: 2px solid var(--border); outline-offset: -2px; }
.palace.pd-active {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
  z-index: 1;
}

/* ── Palace Detail Card ── */
.palace-detail {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  margin-top: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  animation: pd-slide 0.25s ease;
}
@keyframes pd-slide {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
.palace-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--bg-alt);
}
.palace-detail-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--primary);
  font-family: var(--font-sans);
}
.palace-detail-close {
  background: none;
  border: 1px solid var(--border2);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text);
  font-size: 16px;
  transition: background 0.15s;
}
.palace-detail-close:hover { background: var(--bg-alt); }
.palace-detail-desc {
  font-size: 16px;
  color: var(--text);
  font-family: var(--font-sans);
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--bg-alt);
  line-height: 1.7;
}
.palace-detail-stars {
  font-size: var(--text-base);
  color: var(--text);
  font-family: var(--font-sans);
  line-height: 1.6;
}
.shen-hint {
  font-size: 15px;
  font-family: var(--font-sans);
  color: var(--text);
  background: rgba(42,124,130,0.06);
  border-left: 3px solid var(--teal);
  padding: 10px 14px;
  border-radius: 0 8px 8px 0;
  margin: 12px 0;
  line-height: 1.6;
}
.palace-detail-sihua {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pd-sihua-tag {
  font-size: var(--text-sm);
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 8px;
  font-family: var(--font-sans);
}
.pd-sihua-tag.lu   { background: rgba(139,105,20,0.08); color: var(--lu-color); }
.pd-sihua-tag.quan { background: rgba(45,91,160,0.08); color: var(--quan-color); }
.pd-sihua-tag.ke   { background: rgba(27,122,61,0.08); color: var(--ke-color); }
.pd-sihua-tag.ji   { background: rgba(176,48,48,0.08); color: var(--ji-color); }

/* ── Palace Detail Sections ── */
.pd-section { margin-top: 14px; }
.pd-section:first-child { margin-top: 0; }
.pd-section-title, .pd-star-meta, .pd-star-palace-desc, .pd-star-keyword {
  color: var(--text) !important;
}
.pd-section-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  font-family: var(--font-sans);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.pd-star-card {
  background: var(--bg);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
}
.pd-star-card:last-child { margin-bottom: 0; }
.pd-star-header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
}
.pd-star-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--primary);
  font-family: var(--font-sans);
}
/* 文章連結圖示 */
.pd-article-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  font-size: 13px; line-height: 1;
  color: var(--bwl-teal, #1C7280);
  background: rgba(30,122,133,0.08);
  border-radius: 6px;
  text-decoration: none;
  margin-left: 6px;
  vertical-align: middle;
  transition: background 0.15s, color 0.15s;
}
.pd-article-link:hover { background: rgba(30,122,133,0.18); color: #0d5a63; }
.pd-palace-article-link {
  display: inline-block;
  font-size: inherit; font-weight: 500;
  color: var(--bwl-teal, #1C7280);
  text-decoration: none;
  margin-left: 4px;
  transition: color 0.15s;
}
.pd-palace-article-link:hover { color: #0d5a63; text-decoration: underline; }
.pm-article-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  font-size: 12px; line-height: 1;
  color: var(--bwl-teal, #1C7280);
  background: rgba(30,122,133,0.08);
  border-radius: 5px;
  text-decoration: none;
  margin-left: 4px;
  vertical-align: middle;
  transition: background 0.15s;
}
.pm-article-link:hover { background: rgba(30,122,133,0.18); }
.pd-star-keyword {
  font-size: 15px;
  color: var(--text);
}
.pd-star-meta {
  font-size: 15px;
  color: var(--text);
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: center;
}
.pd-star-palace-desc {
  font-size: 15px;
  color: var(--text-sub, var(--text));
  margin-top: 6px;
  padding-left: 2px;
  line-height: 1.6;
}
.pd-brightness {
  font-size: 15px;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
  display: inline-block;
}
.pd-brightness.strong { color: var(--ke-color); background: rgba(27,122,61,0.08); }
.pd-brightness.good   { color: var(--quan-color); background: rgba(45,91,160,0.08); }
.pd-brightness.neutral { color: var(--text); background: var(--bg-alt); }
.pd-brightness.weak   { color: var(--ji-color); background: rgba(176,48,48,0.06); }
.pd-dual-card {
  background: rgba(184,134,11,0.05);
  border: 1px solid rgba(184,134,11,0.15);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 15px;
  color: var(--text);
  margin-top: 8px;
  line-height: 1.6;
}
.pd-dual-card strong { color: var(--lu-color); }
.pd-sha-card {
  background: rgba(176,48,48,0.04);
  border-radius: 8px;
  padding: 8px 12px;
  margin-top: 4px;
}
.pd-sha-item {
  font-size: 15px;
  color: var(--ji-color);
  margin-bottom: 4px;
  line-height: 1.5;
}
.pd-sha-item:last-child { margin-bottom: 0; }
.pd-stack-card {
  background: rgba(45,58,92,0.05);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 15px;
  color: var(--primary);
  margin-top: 8px;
  line-height: 1.5;
}
.pd-empty-hint {
  font-size: 15px;
  color: var(--text);
  margin-bottom: 8px;
  line-height: 1.5;
}
.pd-borrowed-tag {
  font-size: 15px;
  color: var(--text);
  background: var(--bg-alt);
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 6px;
}

.palace-center {
  grid-column: 2 / 4;
  grid-row: 2 / 4;
  background: #ffffff;
  border-left: 3px solid var(--navy);
  border-right: 3px solid var(--navy);
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  gap: 20px;
}

.palace-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 7px;
  border-bottom: 1px solid var(--bg-alt);
  padding-bottom: 6px;
}
.palace-dz   { font-size: 15px; color: var(--text); }
.palace-name { font-size: 20px; font-weight: 700; color: var(--primary); font-family: var(--font-sans); margin-top: 1px; }
.palace-right { text-align: right; }
.palace-gan  { font-size: 15px; color: var(--text); }
.palace-age  { font-size: 15px; color: var(--text); margin-top: 1px; }

.palace-marks { display: flex; gap: 3px; margin-bottom: 6px; flex-wrap: wrap; }
.mark { font-size: 15px; padding: 3px 8px; border-radius: 4px; font-weight: 700; }
.mark-ming    { background: rgba(201,168,76,0.18); color: #8A6010; border: 1px solid rgba(201,168,76,0.3); }
.mark-shen    { background: rgba(77,189,181,0.15); color: var(--bwl-teal); border: 1px solid rgba(77,189,181,0.25); }
.mark-dalimit { background: rgba(58,171,184,0.12); color: var(--navy); border: 1px solid rgba(58,171,184,0.22); }

/* Stars */
.palace-stars { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.star {
  font-size: 16px;
  padding: 3px 8px;
  border-radius: 5px;
  white-space: nowrap;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
/* 英文等長字串語系：宮格內允許換行、字體縮小 */
html[lang="en"] .star, html[lang="es"] .star,
html[lang="ms"] .star, html[lang="id"] .star,
html[lang="vi"] .star {
  white-space: normal;
  word-break: break-word;
  font-size: 15px;
}
html[lang="en"] .sihua-badge, html[lang="es"] .sihua-badge,
html[lang="ms"] .sihua-badge, html[lang="id"] .sihua-badge,
html[lang="vi"] .sihua-badge {
  font-size: 15px;
  padding: 1px 4px;
}
/* 長字串語系統一適配 — 防溢出 */
html[lang="en"] .palace-center, html[lang="es"] .palace-center,
html[lang="ms"] .palace-center, html[lang="id"] .palace-center,
html[lang="vi"] .palace-center {
  white-space: normal; word-break: break-word;
}
html[lang="en"] .center-key, html[lang="es"] .center-key,
html[lang="ms"] .center-key, html[lang="id"] .center-key,
html[lang="vi"] .center-key,
html[lang="en"] .center-val, html[lang="es"] .center-val,
html[lang="ms"] .center-val, html[lang="id"] .center-val,
html[lang="vi"] .center-val {
  word-break: break-word;
}
html[lang="en"] .info-chip-val, html[lang="es"] .info-chip-val,
html[lang="ms"] .info-chip-val, html[lang="id"] .info-chip-val,
html[lang="vi"] .info-chip-val {
  word-break: break-word;
}
html[lang="en"] .sihua-line, html[lang="es"] .sihua-line,
html[lang="ms"] .sihua-line, html[lang="id"] .sihua-line,
html[lang="vi"] .sihua-line {
  word-break: break-word;
}
html[lang="en"] .pattern-chip-name, html[lang="es"] .pattern-chip-name,
html[lang="ms"] .pattern-chip-name, html[lang="id"] .pattern-chip-name,
html[lang="vi"] .pattern-chip-name,
html[lang="en"] .pattern-chip-desc, html[lang="es"] .pattern-chip-desc,
html[lang="ms"] .pattern-chip-desc, html[lang="id"] .pattern-chip-desc,
html[lang="vi"] .pattern-chip-desc {
  word-break: break-word;
}
html[lang="en"] .num-section-label, html[lang="es"] .num-section-label,
html[lang="ms"] .num-section-label, html[lang="id"] .num-section-label,
html[lang="vi"] .num-section-label {
  word-break: break-word;
}
html[lang="en"] .wk-chip-role, html[lang="es"] .wk-chip-role,
html[lang="ms"] .wk-chip-role, html[lang="id"] .wk-chip-role,
html[lang="vi"] .wk-chip-role {
  word-break: break-word;
}
html[lang="en"] .fusion-text, html[lang="es"] .fusion-text,
html[lang="ms"] .fusion-text, html[lang="id"] .fusion-text,
html[lang="vi"] .fusion-text {
  word-break: break-word;
}
.star-main      { color: var(--navy); background: rgba(43,61,107,0.06); border: 1px solid rgba(43,61,107,0.1); }
.star-main.star-lu   { color: var(--lu-color); background: rgba(201,168,76,0.14); border-color: rgba(201,168,76,0.28); font-weight: 700; }
.star-main.star-quan { color: var(--quan-color); background: rgba(58,171,184,0.10); border-color: rgba(58,171,184,0.22); font-weight: 700; }
.star-main.star-ke   { color: var(--ke-color); background: rgba(77,189,181,0.10); border-color: rgba(77,189,181,0.22); font-weight: 700; }
.star-main.star-ji   { color: var(--ji-color); background: rgba(180,40,40,0.09); border-color: rgba(180,40,40,0.22); font-weight: 900; }
.star-aux   { font-size: var(--text-sm); color: var(--text-sub); background: var(--bg); border: 1px solid var(--bg-alt); }
.star-sha   { font-size: var(--text-sm); color: #8A1A1A; background: var(--rose-pale); border: 1px solid var(--rose-bd); }
.star-sha.yang { color: #C02020; font-weight: 700; }
.star-sha.tuo  { color: #802060; }
.star-sha.huo  { color: #B84010; font-weight: 700; }
.star-sha.ling { color: #A03020; }
.star-sha.kong { color: #607090; background: rgba(96,112,144,0.08); border-color: rgba(96,112,144,0.18); }
.star-ma     { font-size: var(--text-sm); color: var(--bwl-teal); background: var(--tip-bg); border: 1px solid rgba(77,189,181,0.25); }

/* 廟旺亮度 badge */
.star-br { font-size: 12px; margin-left: 2px; font-weight: 700; vertical-align: super; }
.star-br-strong { color: var(--ke-color); }
.star-br-good { color: var(--quan-color); }
.star-br-neutral { color: var(--text); }
.star-br-weak { color: var(--ji-color); }
.star-lu-cun { font-size: var(--text-sm); color: #8A6010; background: rgba(201,168,76,0.10); border: 1px solid rgba(201,168,76,0.22); }
.star-misc { font-size: var(--text-sm); color: #607090; background: rgba(138,154,181,0.10); border: 1px solid rgba(138,154,181,0.25); }

/* Sihua badges */
.sihua-badges { display: inline; gap: 3px; margin-left: 2px; }
.sihua-badge { font-size: 12px; padding: 1px 4px; border-radius: 3px; font-family: var(--font-sans); font-weight: 700; letter-spacing: 0.02em; vertical-align: middle; }
.sb-lu   { background: rgba(201,168,76,0.15);  color: #7A5010; border: 1px solid rgba(201,168,76,0.3); }
.sb-quan { background: rgba(58,171,184,0.12);  color: var(--navy); border: 1px solid rgba(58,171,184,0.25); }
.sb-ke   { background: rgba(77,189,181,0.12);  color: #1A6A30; border: 1px solid rgba(77,189,181,0.25); }
.sb-ji   { background: rgba(180,40,40,0.11);   color: #8A1A1A; border: 1px solid rgba(180,40,40,0.25); font-weight: 900; }

/* Center panel — 白底高對比 */
.center-title {
  font-size: 22px;
  font-weight: 900;
  color: var(--navy);
  font-family: var(--font-sans);
  margin-bottom: 16px;
  letter-spacing: 0.12em;
  text-align: center;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--navy);
}
.center-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.center-key {
  font-size: 18px;
  color: var(--teal);
  margin-bottom: 2px;
  letter-spacing: 0.04em;
  font-weight: 700;
  font-family: var(--font-sans);
  text-align: center;
}
.center-val {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  font-family: var(--font-sans);
  line-height: 1.4;
  text-align: center;
}
.center-val.gold { color: #6A4008; }
.center-val.teal { color: var(--bwl-teal); }
.center-divider  { border: none; border-top: 1.5px solid var(--bg-alt); margin: 14px 0; }

.sihua-block { display: flex; flex-direction: column; gap: 8px; }
.sihua-line {
  font-size: var(--text-base);
  color: var(--text);
  line-height: 1.8;
  text-align: left;
}
.sihua-label {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--bwl-teal);
  margin-right: 2px;
}
.sihua-line .lu   { color: #8A6010; font-weight: 700; }
.sihua-line .quan { color: #1A4A8A; font-weight: 700; }
.sihua-line .ke   { color: #1A6A30; font-weight: 700; }
.sihua-line .ji   { color: #8A1A1A; font-weight: 900; }

/* ══════════════════════════════════
   SECTIONS
══════════════════════════════════ */
.section {
  margin-bottom: 24px;
  padding: 16px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border2);
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.section.section-flat {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* ── 白話文卡片 ── */
.bh-card {
  margin: 12px 0 28px;
  background: linear-gradient(135deg, #FDFBF7 0%, #F9F7F2 100%);
  border: 1.5px solid rgba(184,134,11,0.18);
  border-top: 3px solid var(--accent-light);
  border-radius: 12px;
  padding: 18px 20px 16px;
  box-shadow: 0 3px 12px rgba(184,134,11,0.06);
  position: relative;
}
.bh-card::before {
  content: '✦ 白話解析';
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: rgba(184,134,11,0.5);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 10px;
  font-family: var(--font-sans);
}
.bh-card-text {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.9;
  color: var(--text);
  word-break: break-word;
}
.bh-card-text p { margin: 0 0 12px; }
.bh-card-text p:last-child { margin-bottom: 0; }
.bh-card-text .bh-keyline {
  color: var(--text);
  font-weight: 800;
  text-decoration: none;
  background-image: linear-gradient(90deg, rgba(201,168,76,0.22) 0%, rgba(201,168,76,0.22) 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 1px 2px;
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ── bh-tags 標籤列 ── */
.bh-tags { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px; }
.bh-tag { font-size:var(--text-sm); font-weight:700; padding:4px 12px; border-radius:20px; letter-spacing:0.02em; font-family:var(--font-sans); }
.bh-tag.teal { background:rgba(42,150,144,0.12); color:#1a6a66; border:1px solid rgba(42,150,144,0.3); }
.bh-tag.gold { background:rgba(201,168,76,0.15); color:#7a5a10; border:1px solid rgba(201,168,76,0.35); }
.bh-tag.red  { background:rgba(192,57,43,0.10);  color:#8a2010; border:1px solid rgba(192,57,43,0.25); }

/* ── bh-sihua 條目 ── */
.bh-sihua { display:flex; flex-direction:column; gap:10px; margin:0 0 14px; }
.bh-sihua-head { display:flex; align-items:center; flex-wrap:wrap; gap:6px; font-size:var(--text-sm); font-weight:700; }
.bh-sihua:not(:has(> .bh-sihua-head)) { flex-direction:row; align-items:flex-start; flex-wrap:wrap; gap:6px 10px; }
.bh-sihua:not(:has(> .bh-sihua-head)) > .bh-body { flex:1 1 100%; display:block; }
.bh-badge { font-size:var(--text-sm); font-weight:900; padding:3px 10px; border-radius:4px; letter-spacing:0.04em; }
.bh-badge.lu   { background:rgba(201,168,76,0.2);  color:#7a5a10; }
.bh-badge.quan { background:rgba(30,45,90,0.15);   color:var(--navy); }
.bh-badge.ke   { background:rgba(39,174,96,0.15);  color:#1a6a30; }
.bh-badge.ji   { background:rgba(192,57,43,0.15);  color:#8a2010; }
.bh-star  { color:var(--navy); font-weight:800; }
.bh-arrow { color:rgba(100,90,80,0.4); }

/* ── bh-highlight 亮點框 ── */
.bh-highlight { background:rgba(42,150,144,0.07); border:1.5px solid rgba(42,150,144,0.25); border-left:4px solid #2A9690; border-radius:8px; padding:14px 16px; margin:12px 0; }
.bh-highlight-title { font-size:var(--text-base); font-weight:800; color:#1a6a66; margin-bottom:8px; letter-spacing:0.03em; }

/* ── bh-warn 警示框 ── */
.bh-warn { background:rgba(192,57,43,0.05); border:1.5px solid rgba(192,57,43,0.2); border-left:4px solid #C0392B; border-radius:8px; padding:14px 16px; margin:12px 0; }
.bh-warn-title { font-size:var(--text-base); font-weight:800; color:#8a2010; margin-bottom:8px; letter-spacing:0.03em; }

/* ── bh-care 提醒框 ── */
.bh-care { background:rgba(184,134,11,0.08); border:1.5px solid rgba(184,134,11,0.28); border-left:4px solid var(--accent-light); border-radius:8px; padding:14px 16px; margin:12px 0; font-size:var(--text-base); line-height:1.85; color:var(--text); }

/* ── bh-body 共用內文 ── */
.bh-body { font-size:var(--text-base); line-height:1.9; color:var(--text); }
.section-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; cursor: default; }
.section-toggle{display:none !important;}
.section-toggle:hover{background:rgba(30,122,133,0.08);}
.section-toggle.collapsed{transform:rotate(-90deg);}
.section-title {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.02em;
}
.section-title::before {
  content: '';
  display: inline-block;
  width: 4px; height: 18px;
  background: var(--accent);
  border-radius: 2px;
  margin-right: 10px;
  vertical-align: middle;
}
.section-line { flex: 1; height: 1.5px; background: linear-gradient(90deg, var(--bg-alt), transparent); }

/* ── 四化能量卡片 ── */
.energy-header {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.energy-header-cell {
  text-align: center;
  padding: 10px 8px;
  font-size: 18px;
  font-weight: 700;
  font-family: var(--font-sans);
  color: #fff;
  letter-spacing: 0.04em;
}
.energy-header-cell.lu   { background: var(--lu-color); }
.energy-header-cell.quan { background: var(--quan-color); }
.energy-header-cell.ke   { background: var(--ke-color); }
.energy-header-cell.ji   { background: var(--ji-color); }
@media (max-width: 480px) {
  .energy-header { display: none; }
}
@media (max-width: 360px) {
  .energy-header { grid-template-columns: 1fr; }
}
.energy-layer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
@media (max-width: 480px) {
  .energy-layer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 360px) {
  .energy-layer-grid { grid-template-columns: 1fr; }
}
.energy-card-item {
  text-align: center;
  padding: 16px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  border-right: 1px solid var(--bg-alt);
  border-bottom: 1px solid var(--bg-alt);
  position: relative;
}
.energy-card-item:last-child { border-right: none; }
.energy-card-item .energy-card-label { display: none; }
@media (max-width: 480px) {
  .energy-card-item .energy-card-label {
    display: block;
    width: 100%;
    font-size: 17px;
    font-weight: 700;
    font-family: var(--font-sans);
    color: #fff;
    padding: 8px 0;
    text-align: center;
  }
  .energy-card-item.lu .energy-card-label { background: var(--lu-color); }
  .energy-card-item.quan .energy-card-label { background: var(--quan-color); }
  .energy-card-item.ke .energy-card-label { background: var(--ke-color); }
  .energy-card-item.ji .energy-card-label { background: var(--ji-color); }
  .energy-card-item { border-right: none; border-radius: 10px; border: 1px solid var(--border2); margin-bottom: 8px; padding: 0 0 16px; overflow: hidden; }
  .energy-card-item .energy-card-star { padding: 12px 10px; }
}
.energy-card-type {
  font-size: 16px;
  font-weight: 700;
  font-family: var(--font-sans);
  letter-spacing: 0.04em;
}
.energy-card-type.lu   { color: var(--lu-color); }
.energy-card-type.quan { color: var(--quan-color); }
.energy-card-type.ke   { color: var(--ke-color); }
.energy-card-type.ji   { color: var(--ji-color); }
.energy-card-star {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  font-family: var(--font-sans);
  margin-top: 6px;
  font-family: var(--font-sans);
}

/* Dalimit */
.dalimit-grid { margin-bottom: 12px; }
.dalimit-half-hint {
  font-size: 15px;
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg-alt);
  padding: 10px 14px;
  border-radius: 8px;
  margin-top: 12px;
  line-height: 1.6;
}
.flow-overlap-hint {
  font-size: 15px;
  font-family: var(--font-sans);
  color: var(--text);
  background: linear-gradient(135deg, rgba(45,58,92,0.04), rgba(184,134,11,0.04));
  border: 1px solid var(--border2);
  padding: 12px 16px;
  border-radius: 10px;
  margin-top: 12px;
  line-height: 1.7;
}

/* Patterns */
.patterns-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.pattern-chip { border-radius: 12px; padding: 0; border: 1.5px solid; box-shadow: var(--shadow); text-align: center; overflow: hidden; }
.pattern-chip-bar { height: 4px; }
.pattern-chip.ji-ge    { background: var(--gold-pale); border-color: rgba(201,168,76,0.3); }
.pattern-chip.ji-ge .pattern-chip-bar { background: linear-gradient(90deg, var(--gold), #D4A843); }
.pattern-chip.xiong-ge { background: var(--rose-pale); border-color: var(--rose-bd); }
.pattern-chip.xiong-ge .pattern-chip-bar { background: linear-gradient(90deg, #CC3333, #A02020); }
.pattern-chip.neutral  { background: var(--bg-card); border-color: var(--border2); }
.pattern-chip.neutral .pattern-chip-bar { background: var(--bg-alt); }
.pattern-chip-content { padding: 14px 16px; }
.pattern-chip-name { font-family: var(--font-sans); font-size: 18px; font-weight: 700; margin-bottom: 5px; }
.ji-ge .pattern-chip-name    { color: var(--text); }
.xiong-ge .pattern-chip-name { color: var(--text); }
.neutral .pattern-chip-name  { color: var(--text); }
.pattern-chip-desc { font-size: 16px; color: var(--text); font-family: var(--font-sans); }
.pattern-chip.broken { opacity: 0.7; }
.guide-hook { text-align:center; padding:16px 20px; margin:12px 0; font-size:15px; color:var(--teal); font-family:var(--font-sans); line-height:1.6; border-radius:8px; background:rgba(42,124,130,0.06); }

/* Analysis sections */
.analysis-sub { font-size: 18px; color: var(--teal); background: rgba(42,124,130,0.08); border-radius: 4px; padding: 3px 12px; display: inline-block; margin-bottom: 12px; font-weight: 600; font-family: var(--font-sans); letter-spacing: 0.02em; }
/* ── pa-line 一行摘要 ── */
.analysis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.pa-card {
  background: var(--bg);
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: 14px 16px;
  text-align: center;
}
.pa-card.pa-focus {
  border-color: var(--accent);
  border-width: 2px;
  background: rgba(184,134,11,0.03);
}
.pa-card-gong {
  font-size: 18px;
  font-weight: 700;
  color: var(--primary);
  font-family: var(--font-sans);
  margin-bottom: 4px;
}
.pa-card-star {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  font-family: var(--font-sans);
  margin-bottom: 6px;
}
.pa-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  margin-top: 6px;
}
.pa-status {
  font-size: 16px;
  font-weight: 600;
  font-family: var(--font-sans);
  padding: 4px 12px;
  border-radius: 12px;
}
.pa-status.warn { color: var(--ji-color); background: rgba(176,48,48,0.08); }
.pa-status.good { color: var(--lu-color); background: rgba(139,105,20,0.08); }

/* 共用收合系統 */
.chip-expand { overflow:hidden; max-height:0; transition:max-height 0.28s ease; }
.open .chip-expand { max-height:600px; }
.chip-arrow { display:block; text-align:center; font-size:var(--text-sm); color:var(--text); margin-top:4px; transition:transform 0.22s; line-height:1; }
.open .chip-arrow { transform:rotate(180deg); }
.wk-chip { background:var(--bg-card); border:1.5px solid var(--border2); border-radius:12px; padding:0; box-shadow:var(--shadow); cursor:pointer; overflow:hidden; }
.wk-chip-bar { height:4px; background:var(--border2); }
.wk-chip-good .wk-chip-bar { background:linear-gradient(90deg, var(--bwl-teal), #2A9690); }
.wk-chip-warn .wk-chip-bar { background:linear-gradient(90deg, #CC3333, #A02020); }
.wk-chip-content { padding:16px 18px; }
.pa-sihua-item { margin-bottom: 8px; }
.pa-sihua-src  { color: var(--text); font-size: var(--text-sm); margin-bottom: 2px; }
.pa-sihua-lines { font-size: var(--text-base); line-height: 1.5; }
.pa-none { color: var(--text); font-size: var(--text-base); font-style: italic; }

/* ── Numerology ─────────────────── */
.num-hero { display:flex; align-items:center; gap:20px; padding-bottom:16px; margin-bottom:16px; border-bottom:1.5px solid var(--bg-alt); }
.num-hero.master { border-color:var(--gold); }
.num-circle { width:72px; height:72px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-sans); font-size:var(--text-2xl); font-weight:900; flex-shrink:0; background:linear-gradient(135deg,var(--navy-deep),var(--navy)); color:#fff; line-height:1; }
.num-hero.master .num-circle { background:linear-gradient(135deg,#8A6010,var(--gold)); }

.num-hero-body { flex:1; }
.num-title { font-family:var(--font-sans); font-size:22px; font-weight:700; color:var(--navy); margin-bottom:4px; }
.num-core  { font-size:18px; color:var(--text); font-family:var(--font-sans); letter-spacing:0.03em; margin-bottom:6px; }
.num-soul  { font-size:18px; color:var(--text-sub); font-family:var(--font-sans); line-height:1.75; margin-bottom:8px; }
.num-hero.master .num-title { color:#6A3A00; }
.num-tag   { display:inline-block; font-size:var(--text-sm); background:rgba(201,168,76,0.18); color:#8A5A00; border-radius:4px; padding:2px 8px; font-weight:700; margin-bottom:6px; }

/* 個人年 / 個人月 並排 */
.num-py-row   { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.num-py-card  { background:var(--bg-alt); border-radius:10px; padding:14px 16px; }
.num-py-card.cur { background:rgba(42,150,144,0.08); border:1.5px solid rgba(42,150,144,0.2); }
.num-py-header { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.num-py-label  { font-family:var(--font-sans); font-size:20px; font-weight:700; color:var(--navy); }
.num-py-theme  { font-size:15px; color:var(--bwl-teal); font-family:var(--font-sans); font-weight:600; }
.num-py-action { font-size:var(--text-base); color:var(--text); font-family:var(--font-sans); line-height:1.75; }
.num-py-note   { font-size:15px; color:var(--text); font-family:var(--font-sans); margin-top:6px; border-left:2px solid var(--border2); padding-left:8px; }
@media(max-width:540px){ .num-py-row { grid-template-columns:1fr; } }

/* 業力債 */
.num-karmic { background:#fff8f0; border:1.5px solid rgba(180,80,0,0.3); border-radius:10px; padding:12px 16px; margin-bottom:14px; }
.num-karmic-title { font-family:var(--font-sans); font-size:var(--text-md); font-weight:700; color:#8A3A00; margin-bottom:6px; }
.num-karmic-desc  { font-size:var(--text-base); color:var(--text); font-family:var(--font-sans); line-height:1.75; }

/* 附加數字卡片（生日數・太陽數・挑戰數）— 同頂峰週期格式 */
.num-sec-row   { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin-bottom:14px; }
@media(max-width:640px){ .num-sec-row { grid-template-columns:repeat(3,1fr); } }
@media(max-width:400px){ .num-sec-row { grid-template-columns:repeat(2,1fr); } }

/* 頂峰週期 */
.num-pinnacle-row  { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:14px; }
@media(max-width:540px){ .num-pinnacle-row { grid-template-columns:repeat(2,1fr); } }

/* 共用卡片樣式（頂峰 + 附加數字 共用） */
.num-pin-block { background:var(--bg-card); border:1.5px solid var(--border2); border-radius:10px; padding:11px 10px; text-align:center; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.num-pin-block.pin-cur     { border-color:var(--gold);                  background:#fffaee; }
.num-pin-block.pin-main    { border-color:rgba(180,50,50,0.45);          background:var(--rose-pale); }
.num-pin-block.pin-neutral { border-color:var(--border2); }
.num-pin-label { font-size:16px; color:var(--text); font-family:var(--font-sans); margin-bottom:4px; }
.num-pin-num   { font-family:var(--font-sans); font-size:var(--text-xl); font-weight:900; color:var(--navy); line-height:1; margin-bottom:2px; }
.num-pin-block.pin-cur  .num-pin-num  { color:#7A4A00; }
.num-pin-block.pin-main .num-pin-num  { color:var(--ji-color); }
.num-pin-theme { font-size:15px; color:var(--text-sub); font-family:var(--font-sans); font-weight:600; margin-bottom:3px; }
.num-pin-age   { font-size:15px; color:var(--text); font-family:var(--font-sans); }
.num-pin-now   { position:absolute; top:-1px; right:-1px; font-size:var(--text-sm); background:var(--gold); color:#fff; border-radius:0 8px 0 6px; padding:2px 7px; font-family:var(--font-sans); font-weight:700; line-height:1.4; }
.num-pin-bar   { display:none; }
.num-pin-fill  { height:100%; background:var(--gold); border-radius:1px; }

/* 連線卡片 */
.num-arrow-cards { display:flex; flex-direction:column; gap:7px; }
.num-arrow-card  { border-radius:8px; padding:12px 16px; font-size:16px; font-weight:700; font-family:var(--font-sans); border:1.5px solid; line-height:1.6; }
.num-arrow-good  { background:rgba(42,150,144,0.08); color:var(--bwl-teal); border-color:rgba(42,150,144,0.3); }
.num-arrow-warn  { background:rgba(200,80,80,0.06);  color:var(--ji-color);  border-color:rgba(200,80,80,0.25); }

/* 缺數 */
.num-missing-row  { display:flex; align-items:baseline; gap:10px; }
.num-missing-num  { font-family:var(--font-sans); font-size:var(--text-lg); font-weight:700; color:var(--ji-color); min-width:22px; }
.num-missing-desc { font-size:var(--text-base); color:var(--text); font-family:var(--font-sans); line-height:1.75; }

/* 底部九宮格區塊 */
.num-bottom-section { border-top:1.5px solid var(--bg-alt); padding-top:20px; margin-top:4px; }
.num-section-label { font-size:22px; color:var(--navy); font-family:var(--font-sans); margin-bottom:10px; font-weight:700; }
.num-sun-row { font-size:15px; color:var(--text); font-family:var(--font-sans); text-align:center; margin-top:4px; }
.num-sun-row strong { color:var(--navy); font-family:var(--font-sans); font-size:var(--text-base); }
.num-missing-block { background:var(--bg-alt); border-radius:10px; padding:16px 18px; }
.num-missing-grid  { display:flex; flex-direction:column; gap:10px; margin-top:4px; }
.num-grid-wrap { display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:start; }
@media(max-width:600px){ .num-grid-wrap { grid-template-columns:1fr; } }

.pyth-grid { display:grid; grid-template-columns:repeat(3,62px); grid-template-rows:repeat(3,62px); gap:4px; }
.pyth-cell { background:var(--bg-card); border:1.5px solid var(--border2); border-radius:6px; display:flex; flex-direction:column; align-items:center; justify-content:center; font-family:var(--font-sans); }
.pyth-cell.has-num { border-color:var(--bwl-teal); background:var(--tip-bg); }
.pyth-cell .pyth-num { font-size:var(--text-md); font-weight:700; color:var(--navy); }
.pyth-cell .pyth-count { font-size:var(--text-sm); color:var(--bwl-teal); font-family:var(--font-sans); margin-top:2px; }
.pyth-cell.empty-cell .pyth-num { color:var(--border); }

/* ── Numerology inline → class 抽取 ── */
/* 外層白色卡片容器 */
.num-card { background:#fff; border-radius:12px; padding:18px 20px; box-shadow:var(--shadow); margin-bottom:0; }

/* 信息行：左數字 + 右說明（本質數、人生方向數、通用年） */
.num-info-row { border-radius:10px; padding:12px 16px; margin-bottom:14px; display:flex; gap:14px; align-items:stretch; }
.num-info-row.gold   { background:rgba(160,112,32,0.07); border:1px solid rgba(160,112,32,0.2); }
.num-info-row.teal   { background:rgba(42,150,144,0.06); border:1px solid rgba(42,150,144,0.2); }
.num-info-row.mature-active { background:rgba(42,150,144,0.07); border:1px solid rgba(42,150,144,0.25); }
.num-info-row.mature-inactive { background:var(--bg-alt); border:1px solid var(--border2); }
.num-info-left { text-align:center; flex-shrink:0; width:52px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; }
.num-info-left.wide { min-width:52px; width:auto; }
.num-info-label { font-size:var(--text-sm); color:var(--text); font-family:var(--font-sans); font-weight:700; }
.num-info-num { font-family:var(--font-sans); font-size:var(--text-xl); font-weight:900; line-height:1; }
.num-info-num.gold { color:var(--gold); }
.num-info-num.teal { color:var(--bwl-teal); }
.num-info-num.navy { color:var(--navy); }
.num-info-divider { border-left:1.5px solid rgba(160,112,32,0.2); padding-left:14px; display:flex; align-items:center; font-size:var(--text-sm); color:var(--text); font-family:var(--font-sans); line-height:1.8; }
.num-info-divider.teal { border-left-color:rgba(42,150,144,0.2); }
.num-info-divider.col { flex-direction:column; justify-content:center; align-items:flex-start; }

/* 三合一格（生日數・態度數・橋數） */
.num-tri-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px; }
.num-tri-cell { border-radius:10px; padding:16px 14px; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.num-tri-cell.plain { background:var(--bg-alt); }
.num-tri-cell.navy  { background:rgba(26,45,90,0.05); border:1px solid rgba(26,45,90,0.14); }
.num-tri-cell.gold  { background:rgba(160,112,32,0.06); border:1px solid rgba(160,112,32,0.18); }
.num-tri-label { font-size:16px; color:var(--text); font-family:var(--font-sans); font-weight:700; margin-bottom:8px; }
.num-tri-num { font-family:var(--font-sans); font-size:22px; font-weight:900; line-height:1; margin-bottom:8px; }
.num-tri-desc { font-size:16px; font-family:var(--font-sans); line-height:1.7; }
.num-tri-desc.muted { color:var(--text); }
.num-tri-desc.sub { color:var(--text-sub); font-weight:700; }

/* 挑戰/豐盛/缺數 項目（小數字+文字） */
.num-item { border-radius:8px; padding:10px 12px; display:flex; gap:10px; align-items:stretch; }
.num-item.challenge { background:rgba(122,14,14,0.04); border:1px solid rgba(122,14,14,0.12); }
.num-item.abundant  { background:rgba(42,150,144,0.05); border:1px solid rgba(42,150,144,0.18); }
.num-item.missing   { background:rgba(122,14,14,0.04); border:1px solid rgba(122,14,14,0.12); }
.num-item-left { text-align:center; flex-shrink:0; width:36px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; }
.num-item-num { font-family:var(--font-sans); font-size:var(--text-lg); font-weight:900; line-height:1; }
.num-item-sub { font-size:var(--text-sm); font-family:var(--font-sans); white-space:nowrap; letter-spacing:0.02em; }
.num-item-right { border-left:1.5px solid var(--border2); padding-left:10px; display:flex; flex-direction:column; justify-content:center; }
.num-item-title { font-size:var(--text-sm); font-weight:700; color:var(--text-sub); font-family:var(--font-sans); margin-bottom:2px; }
.num-item-desc { font-size:var(--text-sm); color:var(--text); font-family:var(--font-sans); line-height:1.7; }
.num-item-count { font-size:var(--text-sm); font-family:var(--font-sans); font-weight:700; }

/* 箭線卡片（優勢/弱勢） */
.num-arrow-chip { border-radius:8px; padding:10px 14px; }
.num-arrow-chip.strength { background:rgba(42,150,144,0.07); border:1px solid rgba(42,150,144,0.22); }
.num-arrow-chip.weakness { background:rgba(200,80,80,0.05); border:1px solid rgba(200,80,80,0.2); }
.num-arrow-chip-title { font-size:var(--text-sm); font-weight:700; font-family:var(--font-sans); margin-bottom:3px; }
.num-arrow-chip-title.teal { color:var(--bwl-teal); }
.num-arrow-chip-title.red { color:var(--ji-color); }
.num-arrow-chip-desc { font-size:var(--text-sm); color:var(--text); font-family:var(--font-sans); line-height:1.7; }

/* Lo Shu 三軸 */
.num-axis-wrap { margin-top:14px; }
.num-axis-list { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.num-axis-row { background:var(--bg-alt); border-radius:8px; padding:10px 14px; display:flex; align-items:center; gap:14px; }
.num-axis-label-wrap { min-width:64px; text-align:center; }
.num-axis-name { font-size:var(--text-sm); color:var(--text); font-family:var(--font-sans); }
.num-axis-status { font-size:var(--text-sm); font-family:var(--font-sans); font-weight:700; }
.num-axis-nums { flex:1; display:flex; gap:6px; align-items:center; }
.num-axis-box { border-radius:6px; width:30px; height:30px; display:flex; align-items:center; justify-content:center; }
.num-axis-box.has { background:rgba(42,150,144,0.12); border:1.5px solid rgba(42,150,144,0.3); }
.num-axis-box.miss { background:rgba(200,80,80,0.08); border:1.5px solid rgba(200,80,80,0.2); }
.num-axis-box span { font-family:var(--font-sans); font-size:var(--text-base); font-weight:700; }
.num-axis-box.has span { color:var(--bwl-teal); }
.num-axis-box.miss span { color:var(--text); }
.num-axis-desc { font-size:var(--text-sm); color:var(--text); font-family:var(--font-sans); padding-left:4px; }

/* 九年循環格 */
.num-nine-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:10px; }
.num-nine-cell { border-radius:8px; padding:8px 10px; text-align:center; }
.num-nine-cell.normal { background:var(--bg-alt); border:1.5px solid var(--border2); }
.num-nine-cell.current { background:rgba(42,150,144,0.10); border:1.5px solid rgba(42,150,144,0.35); }
.num-nine-year { font-size:var(--text-sm); color:var(--text); font-family:var(--font-sans); }
.num-nine-num { font-family:var(--font-sans); font-size:var(--text-lg); font-weight:900; }
.num-nine-num.navy { color:var(--navy); }
.num-nine-num.teal { color:var(--bwl-teal); }
.num-nine-theme { font-size:var(--text-sm); color:var(--text-sub); font-family:var(--font-sans); }

/* 通用 flex/grid helpers for numerology */
.num-flex-col { display:flex; flex-direction:column; }
.num-flex-wrap { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.num-calc-line { font-size:var(--text-sm); color:var(--text); margin-top:8px; font-family:var(--font-sans); }
.num-mb14 { margin-bottom:14px; }
.num-grid-2col { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:10px; }

/* ── Workplace ───────────────────── */
.workplace-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; }
.wk-chip-head { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.wk-chip-role { font-family:var(--font-sans); font-size:var(--text-lg); font-weight:700; color:var(--navy); }
.wk-chip-palace { font-size:var(--text-base); color:var(--text); }
.wk-chip-stars { font-size:var(--text-base); margin-bottom:10px; line-height:1.8; }
.wk-chip-divider { border:none; border-top:1px solid var(--bg-alt); margin:8px 0; }
.wk-verdict { font-size:var(--text-base); line-height:1.75; color:var(--text); }
.wk-verdict-label { font-size:var(--text-base); font-weight:700; margin-bottom:4px; }
.wk-verdict-label.good { color:var(--bwl-teal); }
.wk-verdict-label.warn { color:var(--ji-color); }
.wk-verdict-label.mixed { color:var(--gold); }
.wk-item { margin-bottom:8px; }



/* ── Workplace tags ─────────────── */
.wk-chip-good { border-color:rgba(42,150,144,0.45); }
.wk-chip-warn { border-color:rgba(200,80,80,0.4); }
.wk-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:4px; }
.wk-tag  { display:inline-block; padding:4px 10px; border-radius:5px; font-size:var(--text-sm); font-weight:700; font-family:var(--font-sans); letter-spacing:0.03em; }
.wk-tag-good  { background:rgba(42,150,144,0.12); color:var(--bwl-teal); border:1px solid rgba(42,150,144,0.25); }
.wk-tag-warn  { background:rgba(200,80,80,0.10);  color:var(--ji-color); border:1px solid rgba(200,80,80,0.22); }
.wk-tag-mixed { background:rgba(160,112,32,0.12); color:var(--gold);     border:1px solid rgba(160,112,32,0.22); }

/* ══ 災劫警示 ══════════════════════════════════════════ */

/* 概覽面板 */
.dis-overview {
  display: flex; gap: 0; margin-bottom: 16px;
  border-radius: 12px; overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 2px 12px rgba(26,18,8,0.08);
}

/* 左側 — 總分 */
.dis-ov-score {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 22px 28px; min-width: 110px;
  background: var(--bg-alt); gap: 4px; flex-shrink: 0;
  border-right: 1px solid var(--border2);
}
.dis-ov-num {
  font-size: 48px; font-weight: 900; line-height: 1;
  font-family: var(--font-sans);
}
.dis-ov-num.c-safe   { color: var(--bwl-teal); }
.dis-ov-num.c-mild   { color: var(--gold); }
.dis-ov-num.c-warn   { color: #c05010; }
.dis-ov-num.c-danger { color: var(--red); }
.dis-ov-unit { font-size: var(--text-sm); color: var(--text); font-family: var(--font-sans); letter-spacing: 0.08em; margin-top: 2px; }
.dis-ov-badge {
  margin-top: 8px; padding: 3px 10px; border-radius: 20px;
  font-size: var(--text-sm); font-weight: 700; font-family: var(--font-sans); letter-spacing: 0.06em;
}
.dis-ov-badge.c-safe   { background: rgba(42,150,144,0.1);  color: var(--bwl-teal); border: 1px solid rgba(42,150,144,0.25); }
.dis-ov-badge.c-mild   { background: rgba(160,112,32,0.1);  color: var(--gold);     border: 1px solid rgba(160,112,32,0.25); }
.dis-ov-badge.c-warn   { background: rgba(192,80,16,0.1);   color: #c05010;         border: 1px solid rgba(192,80,16,0.25); }
.dis-ov-badge.c-danger { background: rgba(176,20,20,0.1);   color: var(--red);      border: 1px solid rgba(176,20,20,0.25); }

/* 右側 */
.dis-ov-right {
  flex: 1; background: var(--bg-card);
  display: flex; flex-direction: column; justify-content: center;
  padding: 18px 22px;
}

/* 卡片格線 */
.disaster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-top: 16px;
  padding: 0 4px;
}

/* 單張卡片 */
.disaster-chip {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 8px rgba(26,18,8,0.07);
  background: var(--bg-card);
  border: 1px solid var(--border2);
}
.dis-chip-top {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
}
.dis-chip-icon-box {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-base); font-weight: 900; color: #fff;
  letter-spacing: 0;
}
.level-danger .dis-chip-icon-box { background: linear-gradient(135deg,#b01414,#d02020); }
.level-warn   .dis-chip-icon-box { background: linear-gradient(135deg,#c05010,#d87030); }
.level-mild   .dis-chip-icon-box { background: linear-gradient(135deg,#a07020,#c09030); }
.level-safe   .dis-chip-icon-box { background: linear-gradient(135deg,#1e7a72,#2a9690); }

.dis-chip-title-wrap { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.dis-chip-cat { font-size: var(--text-base); font-weight: 900; color: var(--text); overflow-wrap: break-word; word-break: break-word; }
.dis-chip-badge {
  font-size: var(--text-sm); font-weight: 700; font-family: var(--font-sans);
  padding: 3px 8px; border-radius: 4px; flex-shrink: 0;
}
.level-danger .dis-chip-badge { background: rgba(176,20,20,0.12); color: #b01414; }
.level-warn   .dis-chip-badge { background: rgba(192,80,16,0.12); color: #c05010; }
.level-mild   .dis-chip-badge { background: rgba(160,112,32,0.12); color: #a07020; }
.level-safe   .dis-chip-badge { background: rgba(42,150,144,0.12); color: var(--bwl-teal); }

/* Flow months */
.fm-table { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
/* 流月 — 桌面表格/手機列表 */
.fm-desktop { display: block; }
.fm-mobile { display: none; }
@media (max-width: 768px) {
  .fm-desktop { display: none; }
  .fm-mobile { display: block; }
}
.fm-table-grid {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: 15px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border2);
}
.fm-table-grid th {
  background: var(--bg-alt);
  padding: 10px 8px;
  font-weight: 700;
  text-align: center;
  font-size: 16px;
}
.fm-table-grid td {
  padding: 8px;
  text-align: center;
  border-bottom: 1px solid var(--bg-alt);
  vertical-align: middle;
}
.fm-table-grid tr.fm-cur {
  background: rgba(184,134,11,0.05);
}
.fm-table-grid tr.fm-cur td:first-child {
  font-weight: 700;
  color: var(--accent);
}
.fm-td-month { font-weight: 700; color: var(--primary); white-space: nowrap; }
.fm-td-gong { font-size: 15px; color: var(--text); }

/* 流月手機版卡片 */
.fm-mobile-card {
  border: 1px solid var(--border2);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 8px;
}
.fm-mobile-card-header {
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font-sans);
  color: #fff;
  padding: 8px 0;
  text-align: center;
  width: 100%;
}
.fm-mobile-card.lu .fm-mobile-card-header { background: var(--lu-color); }
.fm-mobile-card.quan .fm-mobile-card-header { background: var(--quan-color); }
.fm-mobile-card.ke .fm-mobile-card-header { background: var(--ke-color); }
.fm-mobile-card.ji .fm-mobile-card-header { background: var(--ji-color); }
.fm-mobile-card-body {
  font-size: 18px;
  font-weight: 700;
  font-family: var(--font-sans);
  color: var(--text);
  text-align: center;
  padding: 12px 10px;
}

/* Copy textarea */

/* ── 補充：純靈數模式顯示 numerology-card2/3（在 section 外）── */
#chart-screen.numerology-only #numerology-card2,
#chart-screen.numerology-only #numerology-card3,
#chart-screen.numerology-only #bh-numerology,
#chart-screen.numerology-only #bh-numerology2,
#chart-screen.numerology-only #bh-numerology3 { display: block !important; }

/* ── 靈數卡片間距修正 ── */
#numerology-card2,
#numerology-card3 { margin-top: 24px; }

/* ── 紫微 × 靈數 綜合解析卡 ── */
#numerology-card4 { margin-top: 24px; display: none; }
#chart-screen.has-zwds #numerology-card4 { display: block; }
/* fusion cross-analysis result */
.fusion-result {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fusion-item {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--border2);
  background: var(--bg-card);
  font-family: var(--font-sans);
}
.fusion-item.match { border-left: 3px solid var(--ke-color); }
.fusion-item.warn { border-left: 3px solid var(--accent); }
.fusion-item.conflict { border-left: 3px solid var(--ji-color); }
.fusion-icon { font-size: 20px; flex-shrink: 0; }
.fusion-label {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.fusion-text {
  font-size: 16px;
  color: var(--text);
  line-height: 1.7;
}

/* ── 列印 / PDF 匯出 CSS ──────────────────── */

/* ── 區塊分組標題 ── */
.section-group-title {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.04em;
  padding: 10px 16px;
  margin: 36px 0 20px;
  border-bottom: 2px solid;
  background: linear-gradient(135deg, rgba(45,58,92,0.05), transparent);
  border-radius: 8px 8px 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-group-title::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 14px;
  border-radius: 2px;
}
.section-group-title.group-life { border-color: var(--accent); }
.section-group-title.group-life::before { background: var(--accent); }
.section-group-title.group-trend { border-color: var(--teal); }
.section-group-title.group-trend::before { background: var(--teal); }

/* ── Section 鎖定狀態背景 ── */
.section.locked {
  background: var(--bg-card);
}


/* Responsive */
@media (max-width: 768px) {
  /* ── 命盤整體 ── */
  #chart-screen { padding: 16px 0 48px; }
  .chart-body { padding: 0 12px; }

  /* ── Info strip ── */
  .info-strip { gap: 6px; }
  .info-chip { padding: 10px 12px; min-width: 120px; }
  .info-chip-label { font-size: 11px; }
  .info-chip-val { font-size: var(--text-base); }

  /* ── 宮格 — 自適應寬度，可橫向捲動 ── */
  .palace-grid-wrap {
    margin: 0;
    padding: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .palace-grid {
    min-width: 0;
    grid-template-columns: repeat(4, 1fr);
  }
  .palace { min-height: 90px; padding: 6px 4px; }
  .star { font-size: 12px; }
  .palace-center { font-size: 13px; }
  .center-val { font-size: 14px !important; }

  /* ── 流月能量 ── */
  .fm-table { grid-template-columns: repeat(3, 1fr); gap: 5px; }

  /* ── 分析 section ── */
  .section { margin-bottom: 20px; padding: 12px 14px; }
  .section-title { font-size: 22px; }

  /* ── 格局 ── */
  .patterns-grid { grid-template-columns: 1fr; gap: 8px; }
  .pattern-chip-content { padding: 12px 14px; }

  /* ── 災劫 ── */
  .disaster-grid { gap: 8px; }
  .dis-chip-title-wrap { min-width: 0; }
  .dis-overview { flex-direction: column; }
  .dis-ov-score { min-width: auto; text-align: center; margin-bottom: 12px; border-right: none; border-bottom: 1px solid var(--border2); padding-bottom: 16px; }

}

/* ── 超小螢幕 < 480px ── */
@media (max-width: 480px) {
  .chart-body { padding: 0 10px; }
  .info-chip { padding: 10px 12px; }
  .info-chip-label { font-size: 16px; }
  .info-chip-val { font-size: 16px; }
  .palace { min-height: 70px; padding: 4px 3px; }
  .star { font-size: 11px; letter-spacing: 0; white-space: normal; word-break: break-word; }
  .sihua-badge { font-size: 10px; padding: 1px 3px; }
  .palace-center { font-size: 10px; }
  .center-key { font-size: 11px; }
  .center-val { font-size: 13px !important; }
  .pattern-chip-content { padding: 10px 12px; }
  .fm-table { grid-template-columns: repeat(2, 1fr); }
  .section-title { font-size: 22px; }
  /* 生命靈數格 */
  .num-grid-wrap { grid-template-columns: 1fr !important; }
  .num-py-row { grid-template-columns: 1fr !important; }
  .num-sec-row { grid-template-columns: repeat(2, 1fr) !important; }
  .num-pinnacle-row { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── 極小螢幕 < 360px ── */
@media (max-width: 360px) {
  .chart-body { padding: 0 4px; }
  .star { font-size: 9px; }
  .palace { padding: 3px 2px; min-height: 60px; }
  .palace-center { font-size: 8px; }
}

/* ══════════════════════════════════
   PALACE MOBILE — 手機版宮位卡片
   768px 以下隱藏 4×4 宮格，顯示 2 欄卡片
══════════════════════════════════ */
.palace-mobile { display: none; }

@media (max-width: 768px) {
  .palace-grid-wrap { display: none !important; }
  .palace-mobile {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}
@media (max-width: 360px) {
  .palace-mobile { grid-template-columns: 1fr; }
}

.pm-card {
  background: var(--bg-card);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 12px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  position: relative;
  overflow: hidden;
}
.pm-card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.pm-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--border2);
}
.pm-card.is-ming::before { background: var(--accent); }
.pm-card.is-shen::before { background: var(--teal); }
.pm-card.is-dalimit::before { background: var(--primary); }

.pm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.pm-gong {
  font-size: 18px;
  font-weight: 700;
  color: var(--primary);
  font-family: var(--font-sans);
}
.pm-dz {
  font-size: 15px;
  color: var(--text);
  font-family: var(--font-sans);
}
.pm-badges {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.pm-badge {
  font-size: 15px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--font-sans);
}
.pm-badge.ming { background: rgba(184,134,11,0.15); color: var(--accent); }
.pm-badge.shen { background: rgba(42,124,130,0.12); color: var(--teal); }
.pm-badge.dalimit { background: rgba(45,58,92,0.10); color: var(--primary); }

.pm-stars {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  font-family: var(--font-sans);
  line-height: 1.5;
}
.pm-stars .pm-main { font-weight: 700; }
.pm-stars .pm-sihua {
  font-size: 15px;
  font-weight: 700;
  padding: 0 4px;
  border-radius: 3px;
  margin-left: 2px;
  vertical-align: middle;
}
.pm-sihua.lu   { background: rgba(139,105,20,0.12); color: var(--lu-color); }
.pm-sihua.quan { background: rgba(45,91,160,0.12); color: var(--quan-color); }
.pm-sihua.ke   { background: rgba(27,122,61,0.12); color: var(--ke-color); }
.pm-sihua.ji   { background: rgba(176,48,48,0.12); color: var(--ji-color); }



/* ── 鎖定區塊 ── */
.section.locked .section-body {
  position: relative;
}
.lock-overlay {
  margin-top: 16px;
  position: relative;
  z-index: 5;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border2);
  padding: 0;
}
.lock-blur-placeholder {
  padding: 30px 20px 60px;
  filter: blur(5px);
  opacity: 0.4;
  pointer-events: none;
  user-select: none;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 2.0;
  color: var(--text);
  max-height: 160px;
  overflow: hidden;
}
.lock-cta {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  font-family: var(--font-sans);
  z-index: 10;
}
.lock-icon {
  font-size: 32px;
  margin-bottom: 10px;
}
.lock-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 16px;
}
.lock-desc {
  font-size: 15px;
  color: var(--text);
  margin-bottom: 14px;
  line-height: 1.6;
}
.lock-btn {
  display: inline-block;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: #fff;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  padding: 12px 36px;
  border-radius: 24px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(184,134,11,0.3);
  transition: transform 0.15s, box-shadow 0.15s;
}
.lock-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(184,134,11,0.4);
}
/* 解鎖後隱藏 overlay */
.section:not(.locked) .lock-overlay { display: none; }
/* 鎖定時 section-toggle 不動作 */
.section.locked .section-toggle { display: none; }
/* 鎖定時 section-header 不可點 */
.section.locked .section-header { cursor: default; }

/* ── ✦ 根源項目特殊視覺 ── */
.section.section-root {
  border: 1.5px solid rgba(184,134,11,0.25);
  background: linear-gradient(135deg, rgba(184,134,11,0.04), rgba(45,58,92,0.02));
  border-radius: 14px;
  padding: 16px 20px;
}
.section.section-root > .section-header {
  padding: 16px 20px;
}
.section.section-root .section-title {
  font-size: 22px;
  font-weight: 700;
}
.fusion-title {
  background: linear-gradient(90deg, var(--teal), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
#main-pick .product-pick{display:flex;align-items:center;justify-content:space-between;gap:20px;background:var(--bg-card);border:1px solid var(--border);border-radius:20px;padding:20px 28px;text-decoration:none;transition:box-shadow 0.2s,transform 0.2s;box-shadow:0 2px 8px rgba(0,0,0,0.06);}
#main-pick .product-pick:hover{box-shadow:0 6px 24px rgba(30,122,133,0.13);transform:translateY(-2px);}
#main-pick .product-pick-label{display:inline-flex;align-items:center;font-size:16px;font-weight:700;color:var(--gold,#A07020);letter-spacing:0.14em;margin-bottom:8px;background:linear-gradient(135deg,rgba(201,168,76,0.15),rgba(30,122,133,0.1));padding:5px 14px;border-radius:18px;}
#main-pick .product-pick-name-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px;}
#main-pick .product-pick-name{font-family:var(--font-sans);font-size:26px;font-weight:700;color:var(--bwl-teal,#1E7A85);line-height:1.2;letter-spacing:0.03em;}
#main-pick .product-pick-brand{display:inline-block;background:rgba(30,122,133,0.1);color:var(--bwl-teal,#1E7A85);font-size:15px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;padding:6px 16px;border-radius:20px;white-space:nowrap;}
#main-pick .product-pick-desc{font-size:15px;color:var(--text-muted,#666);line-height:1.6;}
#main-pick .product-pick-cta{flex-shrink:0;background:linear-gradient(135deg,var(--bwl-teal,#1E7A85),var(--mint,#2A9690));color:#fff;font-size:16px;font-weight:700;padding:14px 26px;border-radius:10px;white-space:nowrap;letter-spacing:0.04em;box-shadow:0 2px 8px rgba(30,122,133,0.28);transition:opacity 0.15s;}
#main-pick .product-pick-cta:hover{opacity:0.85;}
@media(max-width:480px){#main-pick .product-pick{flex-direction:column;align-items:flex-start;padding:24px 18px;}#main-pick .product-pick-name{font-size:22px;}#main-pick .product-pick-cta{width:100%;text-align:center;}}
.chart-inline-pick .product-pick{display:flex;align-items:center;justify-content:space-between;gap:20px;background:var(--bg-card);border:1.5px solid var(--border2,#E0D8CC);border-radius:14px;padding:20px 24px;text-decoration:none;box-shadow:var(--shadow,0 2px 8px rgba(0,0,0,0.06));transition:box-shadow 0.2s,transform 0.2s;}
.chart-inline-pick .product-pick:hover{box-shadow:0 6px 24px rgba(30,122,133,0.13);transform:translateY(-2px);}
.chart-inline-pick .product-pick-label{display:inline-flex;align-items:center;font-size:16px;font-weight:700;color:var(--gold,#A07020);letter-spacing:0.14em;margin-bottom:8px;background:linear-gradient(135deg,rgba(201,168,76,0.15),rgba(30,122,133,0.1));padding:5px 14px;border-radius:18px;}
.chart-inline-pick .product-pick-name-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px;}
.chart-inline-pick .product-pick-name{font-family:var(--font-sans);font-size:24px;font-weight:700;color:var(--bwl-teal,#1E7A85);line-height:1.2;letter-spacing:0.03em;}
.chart-inline-pick .product-pick-brand{display:inline-block;background:rgba(30,122,133,0.1);color:var(--bwl-teal,#1E7A85);font-size:15px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;padding:6px 16px;border-radius:20px;white-space:nowrap;}
.chart-inline-pick .product-pick-desc{font-size:15px;color:var(--text-muted,#666);line-height:1.6;}
.chart-inline-pick .product-pick-cta{flex-shrink:0;background:linear-gradient(135deg,var(--bwl-teal,#1E7A85),var(--mint,#2A9690));color:#fff;font-size:16px;font-weight:700;padding:14px 26px;border-radius:10px;white-space:nowrap;letter-spacing:0.04em;box-shadow:0 2px 8px rgba(30,122,133,0.28);transition:opacity 0.15s;}
.chart-inline-pick .product-pick-cta:hover{opacity:0.85;}
@media(max-width:480px){.chart-inline-pick .product-pick{flex-direction:column;align-items:flex-start;padding:18px;}.chart-inline-pick .product-pick-name{font-size:20px;}.chart-inline-pick .product-pick-cta{width:100%;text-align:center;}}
.site-footer-wrap{max-width:1120px;margin:0 auto;padding:0 20px 40px;}
.site-footer{padding-top:16px;border-top:1px solid var(--border);font-size:15px;color:var(--text);text-align:center;font-family:var(--font-sans);}
.site-footer a{color:var(--bwl-teal);text-decoration:none;}
.site-footer a:hover{text-decoration:underline;}

/* ── 推薦閱讀區塊 ── */
#chart-recommend{display:none;max-width:1120px;margin:32px auto 0;padding:0 20px 24px;font-family:var(--font-sans);}
#chart-recommend.visible{display:block;}
.recommend-title{font-size:20px;font-weight:700;color:var(--navy,#1A2D5A);margin-bottom:16px;letter-spacing:0.04em;text-align:center;display:flex;align-items:center;gap:12px;}
.recommend-title::before,.recommend-title::after{content:'';flex:1;height:1px;background:var(--border,#DDD5C4);}
.recommend-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media(max-width:768px){.recommend-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:500px){.recommend-grid{grid-template-columns:1fr;gap:14px;}}
.recommend-card{background:var(--bg-card,#fff);color:var(--text,#333);border:1px solid var(--border,#e0e0e0);border-radius:14px;padding:20px 18px 18px;text-decoration:none;display:flex;flex-direction:column;gap:0;transition:border-color 0.18s,box-shadow 0.18s,transform 0.18s;position:relative;overflow:hidden;text-align:left;}
.recommend-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;opacity:0;transition:opacity 0.18s;}
.recommend-card.cat-zwds::before{background:linear-gradient(90deg,var(--bwl-teal,#1E7A85),var(--mint,#2A9690));}
.recommend-card.cat-num::before{background:linear-gradient(90deg,var(--gold-dark,#8B6914),var(--gold,#C9A84C));}
.recommend-card.cat-fusion::before{background:linear-gradient(90deg,var(--bwl-teal,#1E7A85),var(--gold,#C9A84C));}
.recommend-card:hover{border-color:rgba(30,122,133,0.25);box-shadow:0 8px 28px rgba(0,0,0,0.09);transform:translateY(-2px);}
.recommend-card:hover::before{opacity:1;}
.recommend-card-cat{display:inline-block;width:fit-content;font-size:15px;font-weight:700;letter-spacing:0.05em;margin-bottom:10px;padding:5px 12px;border-radius:14px;line-height:1.2;}
.cat-zwds .recommend-card-cat{background:rgba(30,122,133,0.12);color:var(--bwl-teal,#1E7A85);}
.cat-num .recommend-card-cat{background:rgba(201,168,76,0.15);color:var(--gold-dark,#8B6914);}
.cat-fusion .recommend-card-cat{background:linear-gradient(135deg,rgba(30,122,133,0.1),rgba(201,168,76,0.12));color:var(--navy,#1A2D5A);}
.recommend-card-title{font-size:16px;font-weight:700;line-height:1.5;color:var(--navy,#1A2D5A);margin-bottom:8px;}
.recommend-card-desc{font-size:14px;line-height:1.65;color:var(--text-muted,#666);flex:1;}

/* ── Accessibility: prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .loading-pulse, .body-reveal, .palace-hover-anim {
    animation: none !important;
  }
}