/* 天機素問 LIFF 表單樣式
   配色對齊官網 suwen.io：米白 + 墨黑 + 朱砂紅、襯線標題、文人水墨調 */

:root {
  --primary: #211c17;        /* 墨黑 ink — 標題 / 主按鈕 / wordmark */
  --primary-dark: #3a332b;   /* ink-2 */
  --accent: #c23b27;         /* 朱砂紅 cinnabar — 強調 / tab indicator / 價格 */
  --accent-deep: #9f2f1d;    /* cinnabar-deep — hover */
  --ink: #211c17;
  --ink-light: #6f665a;      /* ink-soft — 次要文字 */
  --paper: #f5f0e4;          /* 米白主底 */
  --paper-2: #ece4d3;        /* 稍深米白 — 區塊底 */
  --paper-card: #fbf8ef;     /* 暖白卡片（比 paper 略亮、營造層次）*/
  --border: #d8cebb;         /* line 暖灰邊 */
  --error-bg: #f6e0d9;       /* 朱砂淡底（融入暖色系）*/
  --error-text: #9f2f1d;
  --font-display: 'Cormorant Garamond', 'Noto Serif TC', Georgia, serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* hidden 屬性保險：author style 的 display（如 .btn-primary 的 flex）會蓋掉
   UA 的 [hidden]{display:none}、致 el.hidden = true 無效（搖第 6 爻按鈕殘影雷）。
   全域 !important 讓 hidden 屬性永遠贏。 */
[hidden] { display: none !important; }

html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Noto Serif TC', 'Songti SC', 'PMingLiU', serif;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.03em;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* 英文介面：正文走經典拉丁 serif（標題仍用 --font-display Cormorant Garamond）；
   中文 letter-spacing 0.03em 對英文偏寬，歸零 */
html[lang="en"] body {
  font-family: Georgia, 'Times New Roman', 'Noto Serif TC', serif;
  letter-spacing: 0;
}

/* 日文介面：走和文 Mincho（明朝）字形、避免 'Noto Serif TC' 把日文漢字渲成中文字形變體 */
html[lang="ja"] body {
  font-family: 'Noto Serif JP', 'Noto Serif CJK JP', 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', 'Noto Serif TC', serif;
}

/* 泰文介面：走泰文字形（裝置內建）、中文用的 0.03em 字距對泰文偏寬、歸零 */
html[lang="th"] body {
  font-family: 'Noto Serif Thai', 'Noto Sans Thai', 'Sarabun', 'Leelawadee UI', 'Tahoma', sans-serif;
  letter-spacing: 0;
  line-height: 1.85;
}

/* 越南文介面：拉丁擴展（聲調附標）、Noto Serif 全覆蓋優先、Georgia 備援 */
html[lang="vi"] body {
  font-family: 'Noto Serif', Georgia, 'Times New Roman', serif;
  letter-spacing: 0;
}

/* 西班牙文介面：純拉丁、與英文同款 serif */
html[lang="es"] body {
  font-family: Georgia, 'Times New Roman', 'Noto Serif', serif;
  letter-spacing: 0;
}

.container {
  max-width: 480px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

/* Hero */
.hero {
  position: relative;
  text-align: center;
  /* 上方留 52px 給右上語言切換 pill（36px 高 + 8px top）、避免窄幕/平板下壓到品牌字 */
  padding: 52px 0 28px;
  overflow: hidden;
}
/* 克制版水墨暈染：米白底上極淡的墨 + 朱砂 radial blob（呼應官網 hero 的 ink-wash，但不干擾表單）*/
.hero::before {
  content: '';
  position: absolute;
  top: -50px; right: -40px;
  width: 230px; height: 230px;
  background: radial-gradient(circle, rgba(33, 28, 23, 0.06), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: -60px; left: -30px;
  width: 190px; height: 190px;
  background: radial-gradient(circle, rgba(194, 59, 39, 0.07), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.brand {
  position: relative;
  font-family: var(--font-display);
  font-size: 26pt;
  font-weight: 600;
  letter-spacing: 0.28em;
  color: var(--ink);
}
.brand-sub {
  position: relative;
  font-size: 11pt;
  color: var(--ink-light);
  margin-top: 6px;
  letter-spacing: 0.15em;
}

/* UI 語言切換 — hero 右上角下拉選單。
   用 <select> 而非並排 pill：加再多語言（日/泰…）都不變寬、不爆版，
   且行動裝置走原生 picker、觸控可靠（解決小按鈕點不中的問題）。 */
.lang-switch {
  position: absolute;
  top: 8px;
  right: 0;
  z-index: 10;
}
.lang-select {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--border);
  background-color: var(--paper-card);
  color: var(--ink);
  font-family: inherit;
  font-size: 9.5pt;
  font-weight: 600;
  line-height: 1;
  min-height: 36px;
  padding: 0 30px 0 14px;
  border-radius: 999px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235F5968' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.lang-select:focus {
  outline: 2px solid var(--primary);
  outline-offset: -1px;
  border-color: transparent;
}

/* Card */
.card {
  background: var(--paper-card);
  border-radius: 16px;
  padding: 24px 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 10px rgba(33, 28, 23, 0.05);
  border: 1px solid var(--border);
}
.intro h1 {
  font-family: var(--font-display);
  font-size: 20pt;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--ink);
}
.intro p {
  font-size: 11pt;
  color: var(--ink-light);
}
.intro .price {
  font-size: 18pt;
  font-weight: 700;
  color: var(--accent);
  margin-top: 12px;
  text-align: right;
  letter-spacing: 0.05em;
}

/* Form */
.field {
  margin-bottom: 20px;
}
.field label {
  display: block;
  font-size: 11pt;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--ink);
}
.field .hint {
  display: block;
  font-size: 9pt;
  color: var(--ink-light);
  margin-top: 4px;
}

input[type="text"], input[type="date"], input[type="time"], textarea.form-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12pt;
  font-family: inherit;
  background: var(--paper-card);
  color: var(--ink);
}
textarea.form-input {
  resize: vertical;
  line-height: 1.6;
}
input[type="text"]:focus, input[type="date"]:focus, input[type="time"]:focus, textarea.form-input:focus {
  outline: 2px solid var(--primary);
  outline-offset: -1px;
  border-color: transparent;
}

/* 出生地三層下拉（國際化、真太陽時校正）*/
.geo-selects {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.geo-selects select,
#report-lang,
#iching-report-lang {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12pt;
  font-family: inherit;
  background: var(--paper-card);
  color: var(--ink);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235F5968' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.geo-selects select:focus,
#report-lang:focus,
#iching-report-lang:focus {
  outline: 2px solid var(--primary);
  outline-offset: -1px;
  border-color: transparent;
}
.geo-selects select:disabled {
  background-color: #f1f0f3;
  color: var(--ink-light);
  opacity: 0.7;
}
.solar-preview {
  margin-top: 8px;
  padding: 8px 12px;
  border-left: 3px solid var(--accent);
  background: rgba(190, 18, 57, 0.06);
  border-radius: 0 6px 6px 0;
  font-size: 9.5pt;
  color: var(--ink);
}

.radio-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.radio {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 11pt;
  transition: all 0.15s;
}
.radio input { margin-right: 8px; accent-color: var(--accent); }
.radio:has(input:checked) {
  border-color: var(--accent);
  background: rgba(194, 59, 39, 0.07);
  color: var(--accent-deep);
}

.consent {
  font-size: 9pt;
}
.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  line-height: 1.5;
}
.checkbox input { margin-top: 3px; accent-color: var(--primary); flex-shrink: 0; }
.checkbox span { font-size: 9pt; color: var(--ink-light); font-weight: 400; }

/* Button */
.btn-primary {
  width: 100%;
  padding: 16px;
  background: var(--primary);
  color: var(--paper);
  border: 0;
  border-radius: 999px;
  font-size: 13pt;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: 0.1em;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-primary:hover:not(:disabled) {
  background: var(--accent);
}
.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 次要按鈕（返回修改）*/
.btn-secondary {
  width: 100%;
  padding: 14px;
  margin-top: 12px;
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  font-size: 12pt;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: 0.1em;
  transition: background 0.15s, border-color 0.15s;
}
.btn-secondary:hover:not(:disabled) {
  background: var(--paper-2);
  border-color: var(--ink);
}
.btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 確認資料摘要 */
.confirm-note {
  font-size: 10pt;
  color: var(--accent);
  margin-bottom: 16px;
}
.confirm-list { margin: 0 0 20px; }
.confirm-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.confirm-row dt {
  color: var(--ink-light);
  font-size: 10pt;
  flex-shrink: 0;
}
.confirm-row dd {
  margin: 0;
  color: var(--ink);
  font-size: 12pt;
  font-weight: 600;
  text-align: right;
  word-break: break-word;
}
.btn-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid white;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.btn-primary.loading .btn-spinner { display: inline-block; }
.btn-primary.loading .btn-label { opacity: 0.7; }
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Error */
.error-msg {
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--error-bg);
  color: var(--error-text);
  border-radius: 8px;
  font-size: 10pt;
  white-space: pre-line;
}

/* Footer */
.footer {
  text-align: center;
  margin-top: 32px;
  font-size: 9pt;
  color: var(--ink-light);
}

/* Pages: success / cancel / error */
.status-page {
  text-align: center;
  padding: 64px 16px;
}
.status-page .status-icon {
  font-size: 48pt;
  margin-bottom: 16px;
}
.status-page h1 {
  font-family: var(--font-display);
  font-size: 20pt;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--ink);
}
.status-page p {
  color: var(--ink-light);
  font-size: 11pt;
  margin-bottom: 8px;
}
.status-page .order-id {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 10pt;
  color: var(--ink-light);
  margin-top: 16px;
}
.status-page.error .status-icon { color: var(--accent); }
.status-page.success .status-icon { color: var(--primary); }

/* ────────── Order List Page ────────── */
.order-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.order-item {
  margin-bottom: 12px;
}
.order-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
.order-header {
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.order-display-id {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 13pt;
  font-weight: 700;
  color: var(--primary-dark);
}
.order-meta {
  font-size: 10pt;
  color: var(--ink-light);
}
.order-meta-label {
  min-width: 48px;
  color: var(--ink-light);
  font-weight: 600;
}
.order-actions {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.order-actions:empty {
  display: none;
}
.order-action-hint {
  font-size: 10pt;
  color: var(--accent);
  text-align: center;
  padding: 8px 0;
}
.btn-action {
  text-decoration: none;
  display: block;
  text-align: center;
  padding: 12px 16px;
  font-size: 11pt;
}

/* Status badge */
.order-status-badge {
  font-size: 9pt;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 12px;
  letter-spacing: 0.05em;
}
.badge-ok   { background: #DCFCE7; color: #166534; }
.badge-info { background: #DBEAFE; color: #1E40AF; }
.badge-warn { background: #FEF3C7; color: #92400E; }
.badge-err  { background: #FEE2E2; color: #991B1B; }

/* ────────── FAQ Page ────────── */
.faq-list {
  margin-bottom: 16px;
}
.faq-item {
  cursor: pointer;
  padding: 0;
  overflow: hidden;
}
.faq-item summary {
  list-style: none;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '＋';
  font-size: 14pt;
  color: var(--primary);
  flex-shrink: 0;
  transition: transform 0.2s;
}
.faq-item[open] summary::after {
  content: '－';
  transform: rotate(0);
}
.faq-q {
  font-size: 12pt;
  font-weight: 600;
  color: var(--primary-dark);
  line-height: 1.5;
}
.faq-a {
  padding: 0 20px 20px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
  font-size: 11pt;
  color: var(--ink);
  line-height: 1.85;
}
.faq-a p {
  margin-bottom: 12px;
}
.faq-a p:last-child {
  margin-bottom: 0;
}
.faq-a strong {
  color: var(--primary-dark);
  font-weight: 600;
}
.faq-steps {
  padding-left: 24px;
  margin-bottom: 12px;
}
.faq-steps li {
  margin-bottom: 10px;
  line-height: 1.75;
}
.faq-bullet {
  padding-left: 20px;
  margin-bottom: 12px;
}
.faq-bullet li {
  margin-bottom: 6px;
  line-height: 1.75;
}

/* CTA card (FAQ & empty-state) */
.cta {
  text-align: center;
}
.cta-text {
  margin-bottom: 16px;
  font-size: 12pt;
  color: var(--ink);
  font-weight: 600;
}

/* ───────────────────────────── SPA Tab Navigation ─────────────────────────────
   v0.6.7 統一 LIFF SPA：頂部 tab + 底線 indicator、切 view 不 reload
   風格：文人 / 學者調、不裝 native app、用品牌色（朱砂紅 / 皇家紫）做 indicator */
.view-tabs {
  display: flex;
  background: var(--paper-card);
  margin: 0 -16px 24px;
  padding: 0 4px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(33, 28, 23, 0.04);
}
.view-tabs .tab {
  flex: 1;
  position: relative;
  padding: 14px 8px;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 11.5pt;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-indent: 0.05em;
  color: var(--ink-light);
  cursor: pointer;
  transition: color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.view-tabs .tab:hover {
  color: var(--primary);
}
.view-tabs .tab.active {
  color: var(--accent);        /* 朱砂紅 */
  font-weight: 700;
}
.view-tabs .tab.active::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -1px;                /* 蓋過 border-bottom 那 1px */
  transform: translateX(-50%);
  width: 48px;
  height: 3px;
  background: var(--accent);
  border-radius: 2px 2px 0 0;
  transition: width 0.2s ease;
}
.view-tabs .tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -4px;
  border-radius: 4px;
}

/* View container — 用 class .is-active 切換顯示、配 fade-in animation */
.view {
  display: none;
}
.view.is-active {
  display: block;
  animation: viewFadeIn 0.25s ease-out;
}
@keyframes viewFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ────────── iching: 易經問卦 ────────── */

/* 問題輸入 textarea */
.iching-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12pt;
  font-family: inherit;
  background: var(--paper-card);
  color: var(--ink);
  resize: vertical;
  line-height: 1.7;
}
.iching-textarea:focus {
  outline: 2px solid var(--primary);
  outline-offset: -1px;
  border-color: transparent;
}

/* 問題預覽（確認頁 & 說明頁） */
.iching-question-preview,
.iching-ritual-question-box {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.iching-question-label {
  font-size: 9pt;
  font-weight: 600;
  color: var(--ink-light);
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}
.iching-question-text {
  font-size: 12pt;
  color: var(--ink);
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}

/* 定價列 */
.iching-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.iching-price-label {
  font-size: 11pt;
  color: var(--ink-light);
}
.iching-price-value {
  font-size: 16pt;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.05em;
}

/* 通關密語區塊 */
.iching-passcode-section {
  border-top: 1px dashed var(--border);
  margin-top: 12px;
  padding-top: 4px;
}

/* 等待頁動畫 */
.iching-waiting-page {
  padding: 72px 16px;
}
.iching-trigram-anim {
  font-size: 56pt;
  color: var(--primary);
  margin-bottom: 20px;
  animation: trigram-pulse 2.5s ease-in-out infinite;
}
@keyframes trigram-pulse {
  0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
  50%       { opacity: 0.6; transform: scale(1.08) rotate(12deg); }
}
.iching-waiting-sub {
  font-size: 10pt;
  color: var(--ink-light);
  margin-top: 12px;
  font-style: italic;
}

/* 爻行顯示 */
.iching-yao-done {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 20px;
}
.iching-yao-done:empty {
  display: none;
}
.yao-line {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--paper);
  border: 1px solid var(--border);
}
.yao-pos {
  font-size: 9pt;
  color: var(--ink-light);
  min-width: 40px;
  font-weight: 600;
}
.yao-char {
  font-size: 18pt;
  line-height: 1;
  min-width: 28px;
  text-align: center;
}
.yao-label {
  font-size: 10pt;
  color: var(--ink-light);
}

/* 爻顏色區分 */
.yao-yang .yao-char { color: var(--primary-dark); }
.yao-yin  .yao-char { color: var(--ink-light); }
.yao-moving .yao-char {
  color: var(--accent);
  font-weight: 700;
}
.yao-moving {
  border-color: rgba(190, 18, 60, 0.25);
  background: rgba(190, 18, 60, 0.04);
}

/* 銅錢動畫卡片 */
.iching-coins-card {
  text-align: center;
}
.iching-coins-anim-row {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 16px;
}
.iching-coin-anim {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #b8860b, #daa520, #b8860b);
  border: 3px solid #8B6914;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(0,0,0,0.2), inset 0 1px 3px rgba(255,255,255,0.3);
}
.coin-face {
  font-size: 14pt;
  font-weight: 700;
  color: #5C3A00;
  letter-spacing: 0.05em;
}

/* 銅錢搖動 animation */
@keyframes coin-shake-anim {
  0%   { transform: rotate(0deg) translateY(0); }
  10%  { transform: rotate(-15deg) translateY(-8px); }
  20%  { transform: rotate(12deg) translateY(-14px); }
  30%  { transform: rotate(-18deg) translateY(-10px); }
  40%  { transform: rotate(16deg) translateY(-16px); }
  50%  { transform: rotate(-12deg) translateY(-8px); }
  60%  { transform: rotate(20deg) translateY(-12px); }
  70%  { transform: rotate(-10deg) translateY(-6px); }
  80%  { transform: rotate(8deg) translateY(-4px); }
  90%  { transform: rotate(-5deg) translateY(-2px); }
  100% { transform: rotate(0deg) translateY(0); }
}
.coin-shake {
  animation: coin-shake-anim 0.8s ease-out;
}
/* 各銅錢稍微延遲讓動畫有層次感 */
.coin-anim-2 { animation-delay: 0.05s; }
.coin-anim-3 { animation-delay: 0.1s; }

/* 銅錢結果顯示 */
.iching-coins-display {
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.coins-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 10px;
}
.coin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 11pt;
  font-weight: 700;
  border: 2px solid;
}
.coin-head {
  background: #FEF3C7;
  color: #92400E;
  border-color: #D97706;
}
.coin-tail {
  background: #F3F4F6;
  color: #374151;
  border-color: #9CA3AF;
}
.coins-sum {
  font-size: 11pt;
  color: var(--ink);
  text-align: center;
}
.coins-sum .yao-yang { color: var(--primary-dark); font-weight: 600; }
.coins-sum .yao-yin  { color: var(--ink-light); }
.coins-sum .yao-moving { color: var(--accent); font-weight: 700; }

/* 搖卦進度（第 N 爻 + 六顆點點 + 共 6 爻） */
.iching-yao-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 6px 0 2px;
}
.yao-dots { display: inline-flex; gap: 7px; }
.yao-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--border);
  transition: all .2s ease;
}
.yao-dot.done { background: var(--primary-dark); border-color: var(--primary-dark); }
.yao-dot.active { border-color: var(--primary-dark); box-shadow: 0 0 0 3px rgba(0,0,0,.06); }
.yao-progress-text { font-size: 9pt; color: var(--ink-light); }
/* 標題裡的傳統爻名小字（初爻…上爻） */
.yao-trad { font-size: 10pt; color: var(--ink-light); font-weight: 400; }

/* 搖卦結果白話（你搖出一個 陽爻/陰爻） */
.coins-result-plain {
  font-size: 11pt;
  color: var(--ink);
  text-align: center;
}
.coins-result-plain .yao-big {
  font-size: 16pt;
  margin-right: 4px;
  vertical-align: middle;
}
.coins-result-plain .yao-yang { color: var(--primary-dark); font-weight: 700; }
.coins-result-plain .yao-yin  { color: var(--ink-light); font-weight: 700; }
.coins-result-plain .yao-moving { color: var(--accent); }

/* 搖卦操作區 */
.iching-shake-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.iching-submit-final {
  background: var(--accent);
}
.iching-submit-final:hover:not(:disabled) {
  background: #9F1239;
}

/* 卦象結果頁 */
.iching-result-title {
  font-size: 13pt;
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: 4px;
  letter-spacing: 0.1em;
}
.iching-result-hint {
  font-size: 9pt;
  color: var(--ink-light);
  margin-bottom: 12px;
}
.iching-result-yao {
  border: none;
  padding: 0;
  box-shadow: none;
  background: transparent;
  margin: 0;
}

/* ───────── review：客戶評價表單 ───────── */
.review-title { font-size: 18pt; line-height: 1.4; margin-bottom: 6px; }
.review-sub { font-size: 9pt; color: var(--ink-light, #8a7e6a); margin-bottom: 18px; letter-spacing: 0.08em; }
.review-stars { display: flex; gap: 6px; margin-top: 6px; }
.review-star {
  font-size: 32px; line-height: 1; background: none; border: none; cursor: pointer;
  color: #d8cebb; padding: 2px; transition: color 0.15s, transform 0.1s;
}
.review-star:hover { transform: scale(1.1); }
.review-star.on { color: #c23b27; }
.review-consent {
  display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 18px;
  font-size: 9.5pt; line-height: 1.6; color: var(--ink-light, #6f665a); cursor: pointer;
}
.review-consent input { margin-top: 3px; flex-shrink: 0; }

/* ───────── pay：TON Connect 一鍵付款（TG 通路）───────── */
.pay-summary { list-style: none; padding: 0; margin: 0 0 14px; }
.pay-summary li {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 7px 0; border-bottom: 1px dashed #e2d9c8; font-size: 10.5pt;
}
.pay-summary li span { color: var(--ink-light, #8a7e6a); letter-spacing: 0.06em; }
.pay-summary li strong { font-variant-numeric: tabular-nums; word-break: break-all; text-align: right; margin-left: 12px; }
.pay-hint { font-size: 9.5pt; line-height: 1.7; color: var(--ink-light, #6f665a); margin: 0 0 14px; }
.pay-connect-root { display: flex; justify-content: center; margin-bottom: 14px; }
.pay-status { font-size: 10pt; line-height: 1.7; margin-top: 12px; color: var(--ink, #3d362c); }

/* ── 免費排盤（chart view）── */
.wx-wood { color: #2e7d32; } .wx-fire { color: #c62828; } .wx-earth { color: #795548; } .wx-metal { color: #b8860b; } .wx-water { color: #1565c0; }
.bg-wood { background: #2e7d32; } .bg-fire { background: #c62828; } .bg-earth { background: #795548; } .bg-metal { background: #b8860b; } .bg-water { background: #1565c0; }
.pp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 12px 0; }
.pp-col { text-align: center; background: var(--bg-subtle, #f7f4ee); border-radius: 8px; padding: 8px 2px; }
.pp-name { font-size: 9pt; color: #888; margin-bottom: 4px; }
.pp-star { font-size: 9pt; color: #555; margin-bottom: 4px; }
.pp-gz { font-size: 22pt; font-weight: 700; line-height: 1.25; margin-bottom: 6px; }
.pp-hidden { font-size: 10pt; margin-bottom: 2px; }
.pp-subs { font-size: 8pt; color: #777; line-height: 1.5; }
.chart-h { margin-bottom: 4px; }
.chart-h2 { margin: 14px 0 8px; font-size: 11pt; }
.chart-meta { color: #666; font-size: 10pt; margin-bottom: 6px; }
.wx-row { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.wx-label { width: 3.5em; font-size: 10pt; font-weight: 600; flex-shrink: 0; }
.wx-track { flex: 1; height: 10px; background: #eee; border-radius: 5px; overflow: hidden; }
.wx-fill { height: 100%; border-radius: 5px; }
.wx-pct { width: 3em; text-align: right; font-size: 9pt; color: #555; }
.dy-grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 3px; }
.dy-cell { text-align: center; background: var(--bg-subtle, #f7f4ee); border-radius: 6px; padding: 4px 0; }
.dy-gz { font-size: 11pt; font-weight: 600; }
.dy-meta { font-size: 7.5pt; color: #888; }