/* ==========================================================================
   跟書學 (genshuxue.com) - 諸葛馬前課 · 袖裡乾坤小六壬占卜專屬樣式表
   風格：東方宣紙金石高奢風 · 宣紙水墨 · 朱砂印章 · 掌訣發光動態 · 全端暗黑適配
   版本：v=2.0 (旗艦極致版 · 15 大 SLA 尊嚴保底 · 雙軌起課 · 六維處方箋)
   ========================================================================== */

:root {
  --xlr-paper: #faf8f5;
  --xlr-card-bg: #ffffff;
  --xlr-card-subtle: #fcfbf9;
  --xlr-border: #e6ded1;
  --xlr-border-subtle: #f2ebe1;
  --xlr-text-main: #2b2623;
  --xlr-text-sub: #574f49;
  --xlr-text-muted: #8c8278;

  /* 傳統五行與神位特徵色 */
  --xlr-cinnabar: #b32429;      /* 朱砂紅 (核心主色、印章、主按鈕) */
  --xlr-cinnabar-dark: #8f171c;
  --xlr-cinnabar-light: rgba(179, 36, 41, 0.08);

  --xlr-gold: #b38622;          /* 金石金 (點睛、貴人、裝飾線) */
  --xlr-gold-light: rgba(179, 134, 34, 0.08);
  --xlr-gold-border: rgba(179, 134, 34, 0.25);

  --xlr-wood: #2e7d32;          /* 大安·青木綠 */
  --xlr-wood-light: rgba(46, 125, 50, 0.08);

  --xlr-water: #1565c0;         /* 留連·深玄水藍 */
  --xlr-water-light: rgba(21, 101, 192, 0.08);

  --xlr-fire: #d84315;          /* 速喜·朱雀赤火 */
  --xlr-fire-light: rgba(216, 67, 21, 0.08);

  --xlr-metal: #546e7a;         /* 赤口·白虎金銀 */
  --xlr-metal-light: rgba(84, 110, 122, 0.08);

  --xlr-earth: #4e342e;         /* 空亡·太虛玄黃褐 */
  --xlr-earth-light: rgba(78, 52, 46, 0.08);

  --xlr-shadow: 0 4px 20px rgba(43, 38, 35, 0.06);
  --xlr-shadow-hover: 0 8px 30px rgba(179, 36, 41, 0.12);
  --xlr-radius: 12px;
}

/* 暗黑模式原生適配 (Night Mode) */
html[data-night="night"] {
  --xlr-paper: #1c1817;
  --xlr-card-bg: #24201e;
  --xlr-card-subtle: #2b2624;
  --xlr-border: #3d3532;
  --xlr-border-subtle: #332b29;
  --xlr-text-main: #eee6e2;
  --xlr-text-sub: #c2b6b0;
  --xlr-text-muted: #8a7c76;

  --xlr-cinnabar: #d94348;
  --xlr-cinnabar-dark: #b82c31;
  --xlr-cinnabar-light: rgba(217, 67, 72, 0.15);

  --xlr-gold: #d4a73b;
  --xlr-gold-light: rgba(212, 167, 59, 0.15);
  --xlr-gold-border: rgba(212, 167, 59, 0.3);

  --xlr-wood: #4caf50;
  --xlr-wood-light: rgba(76, 175, 80, 0.15);

  --xlr-water: #42a5f5;
  --xlr-water-light: rgba(66, 165, 245, 0.15);

  --xlr-fire: #ff7043;
  --xlr-fire-light: rgba(255, 112, 67, 0.15);

  --xlr-metal: #90a4ae;
  --xlr-metal-light: rgba(144, 164, 174, 0.15);

  --xlr-earth: #8d6e63;
  --xlr-earth-light: rgba(141, 110, 99, 0.15);

  --xlr-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
  --xlr-shadow-hover: 0 8px 32px rgba(217, 67, 72, 0.22);
}

/* --------------------------------------------------------------------------
   一、宣紙水墨 Hero 頂部導引區
   -------------------------------------------------------------------------- */
.xlr-hero {
  background: var(--xlr-card-bg);
  border: 1px solid var(--xlr-border);
  border-radius: var(--xlr-radius);
  padding: 36px 28px;
  margin-bottom: 28px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--xlr-shadow);
}

.xlr-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--xlr-gold), var(--xlr-cinnabar), var(--xlr-gold));
}

.xlr-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  background: var(--xlr-cinnabar-light);
  border: 1px solid rgba(179, 36, 41, 0.2);
  border-radius: 20px;
  font-size: 0.82rem;
  color: var(--xlr-cinnabar);
  font-weight: 600;
  margin-bottom: 12px;
  letter-spacing: 0.5px;
}

.xlr-hero-title {
  font-size: 1.85rem;
  color: var(--xlr-text-main);
  font-weight: 700;
  margin: 0 0 10px;
  letter-spacing: 1px;
}

.xlr-hero-subtitle {
  font-size: 0.96rem;
  color: var(--xlr-text-sub);
  margin: 0 auto 16px;
  max-width: 680px;
  line-height: 1.6;
}

.xlr-hero-tags {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 0.82rem;
  color: var(--xlr-text-muted);
}

.xlr-hero-tag-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* --------------------------------------------------------------------------
   二、主舞台佈局 (雙欄格局：左側算力控制台 + 右側大師總斷報告卡)
   -------------------------------------------------------------------------- */
.xlr-layout {
  display: grid;
  grid-template-columns: 410px 1fr;
  gap: 24px;
  margin-bottom: 40px;
  align-items: start;
}

@media (max-width: 992px) {
  .xlr-layout {
    grid-template-columns: 1fr;
  }
}

/* 通用卡片外觀 */
.xlr-panel-card {
  background: var(--xlr-card-bg);
  border: 1px solid var(--xlr-border);
  border-radius: var(--xlr-radius);
  padding: 26px 22px;
  box-shadow: var(--xlr-shadow);
  position: relative;
  box-sizing: border-box;
  transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}

/* 解盤中與定盤揭幕動效 */
.xlr-panel-card.is-calculating {
  opacity: 0.72;
  filter: blur(0.4px);
}

.xlr-panel-card.is-revealed {
  animation: xlrRevealPulse 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes xlrRevealPulse {
  0% {
    transform: scale(0.985);
    box-shadow: 0 0 0 0 rgba(212, 167, 59, 0.45);
  }
  50% {
    transform: scale(1.008);
    box-shadow: 0 0 28px rgba(212, 167, 59, 0.35);
  }
  100% {
    transform: scale(1);
    box-shadow: var(--xlr-shadow);
  }
}

.xlr-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--xlr-border);
}

.xlr-panel-title {
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--xlr-text-main);
  display: flex;
  align-items: center;
  gap: 8px;
}

.xlr-panel-title-icon {
  color: var(--xlr-cinnabar);
}

/* --------------------------------------------------------------------------
   三、左側控制台：雙軌起課切換、左手掌盤、情境選擇與觸發按鈕
   -------------------------------------------------------------------------- */

/* 雙軌切換按鈕 (時辰推演 vs 三才報數) */
.xlr-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  background: var(--xlr-paper);
  padding: 4px;
  border-radius: 8px;
  border: 1px solid var(--xlr-border);
  margin-bottom: 20px;
}

.xlr-tab-btn {
  border: none;
  background: transparent;
  padding: 9px 12px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--xlr-text-sub);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.xlr-tab-btn.is-active {
  background: var(--xlr-card-bg);
  color: var(--xlr-cinnabar);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* 左手掌盤 SVG 示意盤 */
.xlr-palm-wrapper {
  background: radial-gradient(circle at center, var(--xlr-paper) 0%, var(--xlr-card-subtle) 100%);
  border: 1px solid var(--xlr-border);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 20px;
  text-align: center;
  position: relative;
}

.xlr-palm-hint {
  font-size: 0.78rem;
  color: var(--xlr-text-muted);
  margin-bottom: 10px;
  letter-spacing: 0.5px;
}

.xlr-palm-svg-box {
  width: 100%;
  max-width: 260px;
  margin: 0 auto;
  position: relative;
}

.xlr-palm-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* 掌訣六神節點 */
.xlr-node {
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.xlr-node circle.xlr-node-bg {
  fill: var(--xlr-card-bg);
  stroke: var(--xlr-border);
  stroke-width: 1.5;
  transition: all 0.3s ease;
}

.xlr-node text.xlr-node-txt {
  fill: var(--xlr-text-main);
  font-size: 11px;
  font-weight: 600;
  text-anchor: middle;
  dominant-baseline: central;
}

.xlr-node text.xlr-node-sub {
  fill: var(--xlr-text-muted);
  font-size: 8px;
  text-anchor: middle;
}

/* 發光高亮動效 */
.xlr-node.is-active circle.xlr-node-bg {
  fill: var(--xlr-cinnabar);
  stroke: var(--xlr-gold);
  stroke-width: 2.5;
  filter: drop-shadow(0 0 8px rgba(179, 36, 41, 0.6));
}

.xlr-node.is-active text.xlr-node-txt,
.xlr-node.is-active text.xlr-node-sub {
  fill: #ffffff;
}

.xlr-node.is-trace-1 circle.xlr-node-bg {
  fill: var(--xlr-wood);
  stroke: #fff;
}
.xlr-node.is-trace-2 circle.xlr-node-bg {
  fill: var(--xlr-fire);
  stroke: #fff;
}
.xlr-node.is-trace-3 circle.xlr-node-bg {
  fill: var(--xlr-cinnabar);
  stroke: var(--xlr-gold);
  filter: drop-shadow(0 0 10px var(--xlr-cinnabar));
}

/* 時辰選擇下拉與報數輸入框 */
.xlr-form-section {
  margin-bottom: 20px;
}

.xlr-form-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.xlr-input-group label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--xlr-text-sub);
  margin-bottom: 4px;
}

.xlr-select,
.xlr-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--xlr-border);
  border-radius: 6px;
  background: var(--xlr-card-bg);
  color: var(--xlr-text-main);
  font-size: 0.88rem;
  box-sizing: border-box;
  transition: border-color 0.2s;
}

.xlr-select:focus,
.xlr-input:focus {
  outline: none;
  border-color: var(--xlr-cinnabar);
  box-shadow: 0 0 0 2px var(--xlr-cinnabar-light);
}

/* 8 大生活場景膠囊按鈕 */
.xlr-scenario-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--xlr-text-sub);
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
}

.xlr-scenario-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 22px;
}

@media (max-width: 480px) {
  .xlr-scenario-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.xlr-pill-btn {
  padding: 8px 4px;
  border: 1px solid var(--xlr-border);
  background: var(--xlr-paper);
  color: var(--xlr-text-sub);
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.xlr-pill-btn:hover {
  border-color: var(--xlr-cinnabar);
  color: var(--xlr-cinnabar);
}

.xlr-pill-btn.is-selected {
  background: var(--xlr-cinnabar);
  border-color: var(--xlr-cinnabar);
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(179, 36, 41, 0.25);
}

/* 生肖選擇欄 (可選) */
.xlr-shengxiao-select-row {
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.xlr-shengxiao-select-row label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--xlr-text-sub);
  white-space: nowrap;
  flex-shrink: 0;
}

/* 主按鈕：即刻推演 */
.xlr-btn-divine {
  width: 100%;
  padding: 13px 20px;
  background: linear-gradient(135deg, var(--xlr-cinnabar), var(--xlr-cinnabar-dark));
  border: 1px solid var(--xlr-gold-border);
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: 2px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(179, 36, 41, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.xlr-btn-divine:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(179, 36, 41, 0.42);
}

.xlr-btn-divine:active {
  transform: translateY(1px);
}

/* --------------------------------------------------------------------------
   四、右側展示區：3秒定心丸總斷、三宮時空鏈、格局與處方
   -------------------------------------------------------------------------- */

/* 首屏 3 秒定心丸頂部總斷大看板 */
.xlr-spotlight-board {
  background: linear-gradient(135deg, var(--xlr-paper) 0%, var(--xlr-card-bg) 100%);
  border: 1px solid var(--xlr-border);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 22px;
  position: relative;
  overflow: hidden;
}

.xlr-spotlight-board::after {
  content: "諸葛馬前課";
  position: absolute;
  right: -15px;
  bottom: -20px;
  font-size: 4.5rem;
  font-weight: 900;
  color: var(--xlr-border);
  opacity: 0.18;
  pointer-events: none;
  font-family: serif;
}

.xlr-spotlight-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.xlr-seal-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 1px;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.xlr-seal-tag.xlr-seal-flash {
  animation: xlrSealFlash 0.65s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes xlrSealFlash {
  0% {
    transform: scale(1.18);
    filter: brightness(1.35);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

/* 6 神專屬大印章標籤 */
.xlr-seal-daan    { background: var(--xlr-wood-light); color: var(--xlr-wood); border: 1px solid rgba(46, 125, 50, 0.3); }
.xlr-seal-liulian { background: var(--xlr-water-light); color: var(--xlr-water); border: 1px solid rgba(21, 101, 192, 0.3); }
.xlr-seal-suxi    { background: var(--xlr-fire-light); color: var(--xlr-fire); border: 1px solid rgba(216, 67, 21, 0.3); }
.xlr-seal-chikou  { background: var(--xlr-metal-light); color: var(--xlr-metal); border: 1px solid rgba(84, 110, 122, 0.3); }
.xlr-seal-xiaoji  { background: var(--xlr-wood-light); color: var(--xlr-wood); border: 1px solid rgba(46, 125, 50, 0.3); }
.xlr-seal-kongwang{ background: var(--xlr-earth-light); color: var(--xlr-earth); border: 1px solid rgba(78, 52, 46, 0.3); }

.xlr-serial-no {
  font-family: monospace;
  font-size: 0.8rem;
  color: var(--xlr-text-muted);
  background: var(--xlr-card-subtle);
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--xlr-border-subtle);
}

.xlr-master-verdict {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--xlr-text-main);
  margin-bottom: 10px;
  line-height: 1.4;
}

.xlr-time-label-badge {
  font-size: 0.82rem;
  color: var(--xlr-gold);
  font-weight: 600;
  margin-bottom: 14px;
  display: block;
}

.xlr-poem-box {
  background: var(--xlr-card-subtle);
  border-left: 3px solid var(--xlr-cinnabar);
  padding: 10px 14px;
  border-radius: 0 6px 6px 0;
  margin-bottom: 12px;
}

.xlr-poem-line {
  font-family: "Noto Serif TC", serif;
  font-size: 0.94rem;
  color: var(--xlr-cinnabar-dark);
  font-weight: 600;
  letter-spacing: 0.5px;
  line-height: 1.5;
}

.xlr-vernacular-text {
  font-size: 0.88rem;
  color: var(--xlr-text-sub);
  line-height: 1.6;
}

/* 頂部聚光燈標籤群組 (情境 + 生肖) */
.xlr-spotlight-badges-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.xlr-spotlight-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  transition: all 0.25s ease;
}

.xlr-badge-scenario {
  background: var(--xlr-cinnabar-light);
  color: var(--xlr-cinnabar);
  border: 1px solid rgba(179, 36, 41, 0.25);
}

.xlr-badge-shengxiao {
  background: var(--xlr-gold-light);
  color: var(--xlr-gold-dark);
  border: 1px solid rgba(212, 167, 59, 0.3);
}

/* 聚光燈專屬情境處方箱 (1:1 即時聯動，破除上下割裂) */
.xlr-spotlight-presc-box {
  margin-top: 16px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--xlr-border);
  border-left: 4px solid var(--xlr-cinnabar);
  border-radius: 6px;
  padding: 13px 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  transition: all 0.3s ease;
}

.xlr-spotlight-presc-box.xlr-presc-flash {
  animation: xlrPrescFlash 0.55s ease;
}

@keyframes xlrPrescFlash {
  0% {
    background: rgba(255, 246, 230, 0.95);
    transform: scale(0.99);
    box-shadow: 0 0 14px rgba(212, 167, 59, 0.35);
  }
  50% {
    transform: scale(1.008);
  }
  100% {
    background: rgba(255, 255, 255, 0.88);
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  }
}

.xlr-spotlight-presc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding-bottom: 5px;
  border-bottom: 1px dashed var(--xlr-border-subtle);
}

.xlr-spotlight-presc-badge {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--xlr-cinnabar);
}

.xlr-spotlight-presc-tip {
  font-size: 0.74rem;
  color: var(--xlr-text-muted);
}

.xlr-spotlight-presc-body {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.xlr-spotlight-presc-row {
  font-size: 0.86rem;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.xlr-spotlight-presc-tag {
  flex-shrink: 0;
  font-weight: 700;
  color: var(--xlr-text-main);
  background: var(--xlr-paper);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.76rem;
  border: 1px solid var(--xlr-border);
  white-space: nowrap;
}

.xlr-spotlight-presc-content {
  color: var(--xlr-text-sub);
  flex: 1;
}

/* --------------------------------------------------------------------------
   五、三宮時空鏈 (Three Palaces Flow: 初宮 ➔ 中宮 ➔ 末宮)
   -------------------------------------------------------------------------- */
.xlr-palaces-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 22px;
}

@media (max-width: 768px) {
  .xlr-palaces-flow {
    grid-template-columns: 1fr;
  }
}

.xlr-palace-card {
  background: var(--xlr-card-subtle);
  border: 1px solid var(--xlr-border);
  border-radius: 8px;
  padding: 14px 12px;
  position: relative;
  transition: transform 0.2s;
}

.xlr-palace-card:hover {
  transform: translateY(-2px);
  border-color: var(--xlr-gold);
}

.xlr-palace-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--xlr-border-subtle);
}

.xlr-palace-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--xlr-gold);
}

.xlr-palace-god-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--xlr-text-main);
}

.xlr-palace-item {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--xlr-text-sub);
  margin-bottom: 6px;
}

.xlr-palace-label {
  font-weight: 600;
  color: var(--xlr-text-main);
}

/* --------------------------------------------------------------------------
   六、初末 36 格局因果鏈、物候信號與轉機樞紐
   -------------------------------------------------------------------------- */
.xlr-pattern-card {
  background: var(--xlr-card-bg);
  border: 1px solid var(--xlr-border);
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 22px;
  border-left: 4px solid var(--xlr-gold);
}

.xlr-pattern-title {
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--xlr-text-main);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.xlr-pattern-elements {
  font-size: 0.8rem;
  color: var(--xlr-gold);
  font-weight: 600;
}

.xlr-pattern-summary {
  font-size: 0.9rem;
  color: var(--xlr-text-sub);
  line-height: 1.6;
  margin-bottom: 14px;
}

/* 物候轉折與轉機樞紐雙格 */
.xlr-pattern-pivot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 640px) {
  .xlr-pattern-pivot-grid {
    grid-template-columns: 1fr;
  }
}

.xlr-pivot-box {
  background: var(--xlr-paper);
  border: 1px solid var(--xlr-border-subtle);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 0.82rem;
  line-height: 1.55;
}

.xlr-pivot-label {
  font-weight: 700;
  color: var(--xlr-cinnabar);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* --------------------------------------------------------------------------
   七、六維落地處方箋 (Prescription Card)
   -------------------------------------------------------------------------- */
.xlr-prescription-card {
  background: var(--xlr-card-bg);
  border: 1px solid var(--xlr-border);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 22px;
}

.xlr-presc-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--xlr-text-main);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.xlr-presc-scenario-badge {
  font-size: 0.8rem;
  color: var(--xlr-cinnabar);
  background: var(--xlr-cinnabar-light);
  padding: 3px 10px;
  border-radius: 12px;
  font-weight: 600;
}

.xlr-presc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

@media (max-width: 600px) {
  .xlr-presc-grid {
    grid-template-columns: 1fr;
  }
}

.xlr-presc-item {
  background: var(--xlr-paper);
  border: 1px solid var(--xlr-border-subtle);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 0.85rem;
  line-height: 1.55;
}

.xlr-presc-label {
  font-weight: 700;
  color: var(--xlr-text-main);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 開運調候與暗礁預警 (六維高亮) */
.xlr-remedies-item {
  border-left: 3px solid var(--xlr-wood);
}

.xlr-pitfalls-item {
  border-left: 3px solid var(--xlr-cinnabar);
}

/* 心理台階回響與矩陣導流 */
.xlr-resonance-box {
  background: rgba(179, 134, 34, 0.05);
  border: 1px dashed var(--xlr-gold-border);
  border-radius: 8px;
  padding: 12px 16px;
  margin-top: 14px;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--xlr-text-sub);
}

.xlr-matrix-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  color: var(--xlr-cinnabar);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.84rem;
}

.xlr-matrix-cta:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   八、尊嚴保底化煞錦囊 (空亡/赤口/留連專屬)
   -------------------------------------------------------------------------- */
.xlr-mitigation-card {
  background: linear-gradient(135deg, rgba(179, 36, 41, 0.04) 0%, rgba(179, 134, 34, 0.04) 100%);
  border: 1px solid var(--xlr-gold-border);
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 22px;
}

.xlr-mitigation-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--xlr-cinnabar);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.xlr-mitigation-text {
  font-size: 0.86rem;
  color: var(--xlr-text-sub);
  line-height: 1.6;
  margin-bottom: 8px;
}

.xlr-mitigation-highlight {
  font-weight: 700;
  color: var(--xlr-cinnabar-dark);
}

/* --------------------------------------------------------------------------
   九、生肖合參與文化典故
   -------------------------------------------------------------------------- */
.xlr-aux-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 24px;
}

@media (max-width: 768px) {
  .xlr-aux-grid {
    grid-template-columns: 1fr;
  }
}

.xlr-aux-card {
  background: var(--xlr-card-bg);
  border: 1px solid var(--xlr-border);
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--xlr-text-sub);
}

.xlr-aux-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--xlr-text-main);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* --------------------------------------------------------------------------
   十、底端行動條：保存海報、重新掐算、複製斷語
   -------------------------------------------------------------------------- */
.xlr-action-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
}

.xlr-act-btn {
  flex: 1;
  min-width: 130px;
  padding: 11px 16px;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
  border: 1px solid var(--xlr-border);
  background: var(--xlr-card-bg);
  color: var(--xlr-text-main);
}

.xlr-act-btn-primary {
  background: var(--xlr-cinnabar);
  border-color: var(--xlr-cinnabar);
  color: #ffffff;
}

.xlr-act-btn-primary:hover {
  background: var(--xlr-cinnabar-dark);
  box-shadow: 0 4px 12px rgba(179, 36, 41, 0.25);
}

.xlr-act-btn:hover {
  border-color: var(--xlr-cinnabar);
  color: var(--xlr-cinnabar);
}

/* --------------------------------------------------------------------------
   十一、Canvas 海報生成彈窗 (Modal & Poster)
   -------------------------------------------------------------------------- */
.xlr-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.xlr-modal-backdrop.is-open {
  display: flex;
}

.xlr-modal-card {
  background: var(--xlr-card-bg);
  border-radius: 12px;
  width: 100%;
  max-width: 440px;
  padding: 24px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  text-align: center;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
}

.xlr-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: transparent;
  border: none;
  font-size: 1.4rem;
  color: var(--xlr-text-muted);
  cursor: pointer;
}

.xlr-poster-img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  margin-bottom: 14px;
  display: block;
}

.xlr-poster-tip {
  font-size: 0.8rem;
  color: var(--xlr-text-muted);
  margin-bottom: 14px;
}

/* --------------------------------------------------------------------------
   十二、SSR 靜態權威百科與 FAQ 折疊模塊
   -------------------------------------------------------------------------- */
.xlr-wiki-section {
  background: var(--xlr-card-bg);
  border: 1px solid var(--xlr-border);
  border-radius: var(--xlr-radius);
  padding: 36px 30px;
  margin-top: 36px;
  box-shadow: var(--xlr-shadow);
}

.xlr-wiki-section h2 {
  font-size: 1.35rem;
  color: var(--xlr-text-main);
  border-bottom: 2px solid var(--xlr-cinnabar);
  padding-bottom: 10px;
  margin-top: 32px;
  margin-bottom: 16px;
  font-weight: 700;
}

.xlr-wiki-section h2:first-child {
  margin-top: 0;
}

.xlr-wiki-section h3 {
  font-size: 1.12rem;
  color: var(--xlr-text-main);
  margin-top: 24px;
  margin-bottom: 10px;
  font-weight: 600;
}

.xlr-wiki-section p {
  font-size: 0.95rem;
  color: var(--xlr-text-sub);
  line-height: 1.8;
  margin-bottom: 16px;
}

.xlr-wiki-section ul,
.xlr-wiki-section ol {
  padding-left: 20px;
  margin-bottom: 18px;
  color: var(--xlr-text-sub);
  line-height: 1.7;
}

.xlr-faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}

.xlr-faq-card {
  border: 1px solid var(--xlr-border);
  border-radius: 8px;
  background: var(--xlr-paper);
  overflow: hidden;
  transition: all 0.2s ease;
}

.xlr-faq-card.is-open {
  border-color: var(--xlr-gold);
  background: var(--xlr-card-bg);
}

.xlr-faq-question {
  padding: 14px 18px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--xlr-text-main);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.xlr-faq-icon {
  color: var(--xlr-cinnabar);
  font-size: 1rem;
  transition: transform 0.25s ease;
}

.xlr-faq-card.is-open .xlr-faq-icon {
  transform: rotate(180deg);
}

.xlr-faq-answer {
  display: none;
  padding: 0 18px 16px;
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--xlr-text-sub);
  border-top: 1px dashed var(--xlr-border-subtle);
  padding-top: 12px;
}

.xlr-faq-card.is-open .xlr-faq-answer {
  display: block;
}