html, body {
  margin: 0;
  padding: 0;
  height: auto;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}


#dot, #fox {
  position: fixed;
  left: 0;
  top: 0;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.55);
  pointer-events: none;
  z-index: 9999;
  will-change: transform;
}
#fox {
  opacity: 0;
  background: rgba(255,255,255,0.30);
}
/* 允许纵向滚动，避免“只能看到卦图上半截” */
#stage { touch-action: pan-y; }


#stage {
  pointer-events: none;
}


/* ===== Mobile: dock bottom UI safely (no translateY) ===== */
@media (max-width: 520px) {
  /* Martin 曲线固定在最底部上方一点 */
  #dailyLine{
    position: fixed;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: calc(100% - 24px);
    max-width: 560px;

    bottom: calc(64px + env(safe-area-inset-bottom)) !important; /* ✅关键 */
    z-index: 100001 !important;
    pointer-events: none;
    box-sizing: border-box;
  }

  /* 年卦输入 + 按钮：固定在左下角，但要高于 Martin 曲线 */
  #yearLookup{
    bottom: calc(16px + env(safe-area-inset-bottom)) !important; /* ✅覆盖 inline */
    left: 16px !important;  /* ✅覆盖 inline */
    z-index: 100002 !important;
    pointer-events: auto !important;
  }

  /* 起卦按钮：右下角最高层 */
  #drawGua{
    bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    right: 16px !important;
    z-index: 100003 !important;
    pointer-events: auto !important;
  }
}



#yearLookup {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
#yearLookup button {
  pointer-events: auto !important;

  /* iOS Safari: 防止默认按钮白底导致“白字白底=看不见，但能点” */
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255,255,255,0.10);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 10px;
  font-size: 14px;
  line-height: 1;
}

/* 同步处理其它固定按钮 */
#drawGua,
#warBtn{
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255,255,255,0.10);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 10px;
}
/* 1) 把 stage 明确变成“背景层” */
#stage{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
}

/* 2) 把 content 明确变成“前景可滚动层” */
#content{
  position: relative;
  z-index: 10;
  padding: 12px 12px 140px; /* ✅ 底部留白，避免被 fixed UI 挡住 */
  min-height: 100vh;
}

/* 3) guaBox 不要用 9999（太夸张会触发 iOS 合成层怪问题），跟 content 走即可 */
#guaBox{
  z-index: 10 !important;
}

/* 4) 卦图别限 max-height（你现在 80vw 在竖屏会让图看起来像“只剩上面一点”） */

/* Martin dock never overflow on iPhone */
#dailyLine{
  box-sizing: border-box;
  max-width: 100vw;
  overflow: hidden;
}

#dailyLine canvas{
  box-sizing: border-box;
  max-width: 100%;
  display: block;
}

/* iPhone: tighter margins */
@media (max-width: 520px){
  #dailyLine{
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important;
    width: calc(100vw - 16px) !important; /* ✅ 绝不超过屏幕 */
    max-width: calc(100vw - 16px) !important;
  }
}

/* ===== Annual Report Overlay ===== */
.annual-overlay{
  position: fixed;
  inset: 0;
  z-index: 99997;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  pointer-events: none; /* 不挡输入 */
}

.annual-overlay-inner{
  position: absolute;
  left: 50%;
  top: 18%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);
}

.annual-overlay-text{
  color: rgba(255,255,255,.88);
  font-size: 13px;
  letter-spacing: .2px;
}

.annual-spinner{
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.25);
  border-top-color: rgba(255,255,255,.9);
  animation: annualSpin 0.85s linear infinite;
}

@keyframes annualSpin{
  to { transform: rotate(360deg); }
}


/* ===== VISIBILITY EMERGENCY FIX: make button text BLUE ===== */
#drawGua,
#yearBtn,
#btnAnnualReport,
#warBtn{
  color: #4aa3ff !important;              /* 蓝色文字 */
  -webkit-text-fill-color: #4aa3ff !important; /* iOS 有时会忽略 color */
}

/* 可选：顺手保证按钮背景不是白的（否则蓝字可能也不明显） */
#drawGua,
#yearBtn,
#btnAnnualReport,
#warBtn{
  background: rgba(0,0,0,0.35) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 10px !important;
}
/* ===== 让 warPlate（盘型选择）始终可见，未选中也蓝字 ===== */
#warPlate {
  -webkit-appearance: none;   /* 关键：干掉 iOS 原生样式 */
  appearance: none;
  background: rgba(0,0,0,0.35) !important;   /* 深色底 */
  color: #4aa3ff !important;                 /* 蓝色文字 */
  border: 1px solid rgba(255,255,255,0.18) !important;
}

/* 让下拉箭头可见（可选但推荐） */
#warPlate {
  background-image:
    linear-gradient(45deg, transparent 50%, #4aa3ff 50%),
    linear-gradient(135deg, #4aa3ff 50%, transparent 50%);
  background-position:
    calc(100% - 16px) 50%,
    calc(100% - 10px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}

/* 下拉展开时的选项也统一风格（部分浏览器有效） */
#warPlate option {
  background: #0b0b0f;
  color: #4aa3ff;
}

/* ===== War panel must be above bottom dock ===== */
#warLookup{
  z-index: 100002 !important;     /* 让输入区不被 dailyLine 盖住 */
  pointer-events: auto !important;
}

#warBox{
  z-index: 100004 !important;     /* 必须高于 dailyLine(100001) / yearLookup(100002) / drawGua(100003) */
  pointer-events: auto !important;
}
#warBox{
  z-index: 100004 !important;   /* 必须高于 #content(10) 以及按钮层 */
  pointer-events: auto !important;
}
/* ===== VISIBILITY EMERGENCY FIX: make button text BLUE ===== */
#drawGua,
#yearBtn,
#btnAnnualReport,
#warBtn,
#btnCopyResult,
#btnCopyPrompt,
#btnOpenChatGPT{
  color: #4aa3ff !important;
  -webkit-text-fill-color: #4aa3ff !important;
}

/* 可选：按钮底色和边框（避免白底白字/白底看不清） */
#drawGua,
#yearBtn,
#btnAnnualReport,
#warBtn,
#btnCopyResult,
#btnCopyPrompt,
#btnOpenChatGPT{
  background: rgba(0,0,0,0.35) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 10px !important;
}

/* warBox 工具条按钮：紧凑一点 */
#warTools button{
  padding: 7px 10px;
  font-size: 13px;
  line-height: 1;
}

.qimen-wrapper { margin: 10px 0; }
.qimen-header { display:flex; gap:10px; flex-wrap:wrap; margin: 6px 0 10px; font-size:12px; opacity:.95; }
.qimen-pill { padding:2px 8px; border:1px solid rgba(0,0,0,.15); border-radius:999px; background: rgba(255,255,255,.65); }

.qimen-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.gong { border:1px solid rgba(0,0,0,.15); border-radius:12px; padding:10px; background: rgba(255,255,255,.65); }
.gong-title { font-weight:800; margin-bottom:6px; }

.decision-details { margin-top: 12px; }
.decision-pre { white-space: pre-wrap; line-height:1.35; font-size:12px; padding:10px; border:1px solid rgba(0,0,0,.12); border-radius:10px; background: rgba(255,255,255,.65); }

/* 高亮 */
.gong.best { outline: 2px solid #3b82f6; }
.gong.zf   { outline: 2px solid #16a34a; }
.gong.zs   { outline: 2px solid #f59e0b; }


.qimen-wrapper {
  transform: scale(0.8);
  transform-origin: top left;
  width: 125%;
}

.qimen-wrapper .item,
.qimen-wrapper .gong-title {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}

/* ===== War input layout ===== */
#warRow1{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  max-width: calc(100vw - 32px);
}

#warDate{
  width: 140px;
}

#warHour,
#warMinute{
  width: 56px;
}

/* 第2行：盘型 + 地点 + 起局 */
#warPlate{
  grid-column: 1 / 2;
  width: 100% !important;
  min-width: 0;
}

#cityPickerContainer{
  grid-column: 2 / 4;
  width: 100% !important;
  min-width: 0;
}

#warBtn{
  grid-column: 4 / 5;
  width: 100% !important;
  min-width: 0;
}

/* ===== Mobile: 3-row adaptive layout ===== */
@media (max-width: 520px) {
  #warLookup{
    left: 10px !important;
    right: 10px !important;
    bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
  }

  #warRow1{
    display: grid !important;
    grid-template-columns: 1.4fr 1.4fr .8fr .8fr;
    gap: 6px !important;
    width: 100%;
    max-width: 100%;
    align-items: stretch;
  }

  /* 第1行：日期 + 时 + 分 */
  #warDate{
    grid-column: 1 / 3;
    width: 100% !important;
    min-width: 0;
  }

  #warHour{
    grid-column: 3 / 4;
    width: 100% !important;
    min-width: 0;
  }

  #warMinute{
    grid-column: 4 / 5;
    width: 100% !important;
    min-width: 0;
  }


  /* 第2行：盘型 + 地点 + 起局 */
#warPlate{
  grid-column: 1 / 2;
  width: 100% !important;
  min-width: 0;
}

#cityPickerContainer{
  grid-column: 2 / 4;
  width: 100% !important;
  min-width: 0;
}

#warBtn{
  grid-column: 4 / 5;
  width: 100% !important;
  min-width: 0;
}

  /* 第二行主客说明改为上下叠 */
  #warLookup > div:nth-child(2){
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  #warLookup > div:nth-child(2) > div{
    width: 100% !important;
    box-sizing: border-box;
  }

  /* 限制城市控件别撑爆 */
  #cityPickerContainer,
  #cityPickerContainer *{
    max-width: 100%;
    box-sizing: border-box;
  }

  /* warBox: full-screen overlay — no position/size constraints */
}

/* ================================
   Institutional Report Theme
   ================================ */

:root{
  --bg: #0b1220;          /* 页面深底（商务深蓝黑） */
  --panel: #0f1b2e;       /* 卡片底 */
  --panel2: #0c1628;      /* 卡片内层 */
  --border: #23324a;      /* 边框 */
  --text: #e7eefc;        /* 主文字 */
  --muted: #a9b7d0;       /* 次文字 */
  --title: #ffffff;       /* 标题 */
  --accent: #7aa7ff;      /* 机构蓝 */
  --risk: #ff6b6b;        /* 风险红（克制） */
  --ok: #64d2a3;          /* 正向绿（克制） */
  --warn: #ffd166;        /* 警示黄 */
}

body{
  background: var(--bg);
  color: var(--text);
}

/* 报告容器：整页一份报告 */
.report{
  max-width: 980px;
  margin: 16px auto;
  padding: 0 12px 28px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* 每个分区：像咨询公司报告的“模块卡片” */
.report-sec{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
}

.report-sec-title{
  padding: 12px 14px;
  font-weight: 700;
  color: var(--title);
  letter-spacing: .2px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(122,167,255,.08);
}

/* 正文：保持文字报告的可读性 */
.report-sec-body{
  padding: 12px 14px 14px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.62;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  white-space: normal;
  word-break: break-word;
}

/* Anchors 标题更像“证据索引” */
.report-anchor-title{
  display: inline-block;
  margin: 8px 0 6px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(122,167,255,.35);
  background: rgba(122,167,255,.10);
  color: var(--accent);
  font-weight: 700;
}

/* 轻微语义高亮（基于文本关键字） */
.report-sec-body .risk,
.report-sec-body .danger{ color: var(--risk); font-weight: 700; }
.report-sec-body .ok{ color: var(--ok); font-weight: 700; }
.report-sec-body .warn{ color: var(--warn); font-weight: 700; }

/* 如果你还有旧的 decision-pre，直接压制掉视觉 */
.decision-pre{
  background: transparent !important;
  border: none !important;
  color: inherit !important;
  padding: 0 !important;
}

/* ===== Taiyi 9 grid ===== */

.taiyi-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:10px;
}

.taiyi-cell{
  border:1px solid rgba(255,255,255,.15);
  border-radius:10px;
  padding:8px;
  background:rgba(255,255,255,.06);
  font-size:12px;
}

.taiyi-title{
  font-weight:700;
  opacity:.85;
  margin-bottom:4px;
}

.taiyi-item{
  line-height:1.3;
}

/* 星曜颜色 */

.ty-wufu   { color:#ffd700 }
.ty-taizun { color:#ff8c00 }
.ty-feiniao{ color:#00bfff }
.ty-leigong{ color:#ff4d4d }
.ty-linjin { color:#66cc66 }

.ty-taiyi  { color:#ffffff }
.ty-wenchang { color:#a7c7ff }
.ty-shiji  { color:#ffb347 }

/* 八门 */
.ty-men_kai   { color:#2563eb; }  /* 开门 */
.ty-men_xiu   { color:#16a34a; }  /* 休门 */
.ty-men_sheng { color:#22c55e; }  /* 生门 */
.ty-men_shang { color:#ef4444; }  /* 伤门 */
.ty-men_du    { color:#7c3aed; }  /* 杜门 */
.ty-men_jing  { color:#f59e0b; }  /* 景门 */
.ty-men_si    { color:#94a3b8; }  /* 死门 */
.ty-men_jing2 { color:#06b6d4; }  /* 惊门 */


.taiyi-row-door{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:22px;
  margin:2px 0 4px 0;
}

.taiyi-row-door-empty{
  opacity:0;
}

#cityPickerContainer select,
#cityPickerContainer input,
#cityPickerContainer button{
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 520px){
  #cityPickerContainer *{
    font-size: 12px;
  }
}

#warDate{
  width: 120px;
}

#warHour,
#warMinute{
  width: 44px;
}

#warPlate{
  width: 88px;
}

#cityPickerContainer{
  min-width: 72px;
}

#warHostGuestRow{
  display:flex;
  gap:8px;
  align-items:center;
}

.war-hostguest-note{
  width:220px;
  padding:5px 8px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.05);
  color:#ddd;
  font-size:12px;
  line-height:1.2;
  white-space:normal;
}

@media (max-width: 520px){
  #warHostGuestRow{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:4px !important;
  }

  .war-hostguest-note{
    width:100% !important;
    padding:4px 7px;
    font-size:11px;
    line-height:1.15;
  }


}











/* ===== warBox: true full-screen, clip horizontal overflow ===== */
#warBox {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  max-width: none !important;
  overflow-x: hidden !important;
}

/* ===== Mobile report: minimal targeted width fixes ===== */
@media (max-width: 600px) {

  /* Scroll container clips at screen edge */
  #wfReportBody {
    overflow-x: hidden !important;
  }

  /* Content area: screen width, comfortable padding */
  #warOut {
    max-width: 100% !important;
    width: 100% !important;
    padding: 16px 14px !important;
    box-sizing: border-box !important;
  }

  /* Toolbar: wrap so buttons don't stretch it wide */
  #warTools {
    padding: 8px 12px !important;
    flex-wrap: wrap !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  /* qimen-wrapper has width:125% by design — clip it */
  .qimen-wrapper {
    width: 100% !important;
    overflow: hidden !important;
    transform: scale(0.78) !important;
    transform-origin: top left !important;
  }
}

#toast {
  z-index: 2147483647 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   JIN — SHARED MODAL FOUNDATION
   Both the Request (gold) and Pay/Scan (green) modals use this base.
═══════════════════════════════════════════════════════════════════ */

/* ── Header trigger buttons — match badge sizing ── */
#wfJinRequestBtn,
#wfJinScanBtn {
  display: none; /* shown by JS once UUID available */
  align-items: center;
  gap: 5px;
  height: auto;           /* let padding control height, same as badges */
  padding: 2px 9px;       /* matches wfJinBadge / wfMemberBadge */
  background: transparent;
  border-radius: var(--r);
  font-family: var(--mono);
  font-size: 10px;        /* matches badge font-size */
  letter-spacing: .06em;  /* matches wfJinBadge */
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
  line-height: 1.4;       /* same visual height as span badges */
  vertical-align: middle;
}
#wfJinRequestBtn {
  border: 1px solid var(--gold-rule);
  color: var(--gold);
}
#wfJinRequestBtn:hover { background: var(--gold-dim); border-color: var(--gold); }
#wfJinScanBtn {
  border: 1px solid rgba(76,175,130,.3);
  color: var(--green);
}
#wfJinScanBtn:hover { background: rgba(76,175,130,.08); border-color: var(--green); }
#wfJinRequestBtn svg,
#wfJinScanBtn svg { flex-shrink: 0; width: 10px; height: 10px; }

/* ── Modal overlay — CRITICAL: fixed + flex centering ── */
#wfJinModal,
#wfJinScanModal {
  display: none;
  position: fixed;
  inset: 0;                    /* top:0 right:0 bottom:0 left:0 */
  z-index: 900;
  background: rgba(4,10,8,.82);
  backdrop-filter: blur(12px);
  /* centering */
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}
#wfJinModal.wf-jin-open   { display: flex; }
#wfJinScanModal.wf-scan-open { display: flex; }
#wfJinScanModal { z-index: 901; } /* scanner sits above request modal */

/* ── Modal panel ── */
#wfJinModalPanel,
#wfJinScanPanel {
  position: relative;
  width: 100%;
  max-width: 400px;
  background: var(--bg-paper);
  border: 1px solid var(--border-md);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(184,152,90,.06),
    0 32px 64px rgba(0,0,0,.65);
  /* prevent panel from inheriting flex-stretch */
  flex-shrink: 0;
}

/* ── Header JIN compact menu ───────────────────── */
#wfHeaderJinMenu {
  position: relative;
  display: flex;
  align-items: center;
}

#wfHeaderJinMenuBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--border-md);
  border-radius: var(--r);
  font-family: var(--mono);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}

#wfHeaderJinMenuBtn:hover {
  color: var(--gold);
  border-color: var(--gold-rule);
  background: rgba(184,152,90,.06);
}

#wfHeaderJinMenuPanel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 170px;
  padding: 8px;
  background: var(--bg-paper);
  border: 1px solid var(--border-md);
  border-radius: var(--r-md);
  box-shadow: 0 18px 36px rgba(0,0,0,.35);
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 450;
}

#wfHeaderJinMenuPanel[hidden] {
  display: none !important;
}

/* menu items override old header-chip style */
#wfHeaderJinMenuPanel #wfJinRequestBtn,
#wfHeaderJinMenuPanel #wfJinScanBtn {
  display: inline-flex;
  width: 100%;
  justify-content: flex-start;
  padding: 8px 10px;
  border-radius: var(--r);
  font-size: 10px;
  line-height: 1.35;
}

/* shared row look inside panel */
.wf-header-menu-item {
  align-items: center;
  gap: 8px;
  background: transparent;
}

.wf-header-menu-item span {
  flex: 1;
  text-align: left;
}
/* gold top rule — request */
#wfJinModalPanel::before {
  content: '';
  display: block;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold-lt) 50%, var(--gold) 70%, transparent);
}
/* green top rule — scanner */
#wfJinScanPanel::before {
  content: '';
  display: block;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--green) 30%, #6ddcaa 50%, var(--green) 70%, transparent);
}

/* ── Modal header ── */
#wfJinModalHead,
#wfJinScanHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--border);
}
#wfJinModalTitle {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
}
#wfJinScanTitle {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--green);
}
#wfJinModalClose,
#wfJinScanClose {
  width: 28px; height: 28px;
  background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-3);
  border-radius: var(--r);
  transition: background .12s, color .12s;
  font-size: 16px; line-height: 1;
}
#wfJinModalClose:hover,
#wfJinScanClose:hover { background: var(--border); color: var(--ink); }

/* ── Modal body ── */
#wfJinModalBody,
#wfJinScanBody {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Step label ── */
.wf-jin-step-label {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 6px;
}

/* ── Error ── */
#wfJinError,
#wfJinScanError {
  display: none;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--red);
  letter-spacing: .06em;
  padding: 8px 12px;
  background: rgba(176,80,80,.08);
  border: 1px solid rgba(176,80,80,.18);
  border-radius: var(--r);
}
#wfJinError.wf-jin-visible,
#wfJinScanError.wf-scan-err-visible { display: block; }

/* ═══════════════════════════════════════════════════════════════════
   JIN REQUEST — QR generator
═══════════════════════════════════════════════════════════════════ */

#wfJinAmountRow {
  display: flex;
  align-items: center;
  gap: 10px;
}
#wfJinAmountInput {
  flex: 1;
  height: 44px;
  padding: 0 14px;
  background: var(--surface);
  border: 1px solid var(--border-md);
  border-radius: var(--r-md);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 18px;
  letter-spacing: .04em;
  outline: none;
  transition: border-color .15s;
  -moz-appearance: textfield;
  box-sizing: border-box;
}
#wfJinAmountInput::-webkit-inner-spin-button,
#wfJinAmountInput::-webkit-outer-spin-button { -webkit-appearance: none; }
#wfJinAmountInput:focus { border-color: var(--gold-rule); }
#wfJinAmountInput::placeholder { color: var(--ink-4); font-size: 14px; }

.wf-jin-unit {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--gold);
  letter-spacing: .1em;
  flex-shrink: 0;
}

#wfJinMemoInput {
  width: 100%;
  height: 38px;
  padding: 0 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 11px;
  outline: none;
  transition: border-color .15s;
  box-sizing: border-box;
}
#wfJinMemoInput:focus { border-color: var(--border-md); }
#wfJinMemoInput::placeholder { color: var(--ink-4); }

#wfJinGenerateBtn {
  width: 100%;
  height: 46px;
  background: var(--gold);
  color: #06100d;
  border: none;
  border-radius: var(--r-md);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s, opacity .15s;
}
#wfJinGenerateBtn:hover    { background: var(--gold-lt); }
#wfJinGenerateBtn:disabled { opacity: .4; cursor: not-allowed; }

/* QR result panel */
#wfJinQrPanel {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
#wfJinQrPanel.wf-jin-visible { display: flex; }

#wfJinQrWrap {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #fff;
  padding: 8px;
}
#wfJinQrImg {
  display: block;
  width: 176px;
  height: 176px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

#wfJinQrMeta { text-align: center; }
#wfJinQrAmount {
  font-family: var(--mono);
  font-size: 22px;
  color: var(--gold-lt);
  letter-spacing: .06em;
}
#wfJinQrDesc {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
}
#wfJinQrStatus {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  padding: 4px 12px;
  border-radius: 99px;
  margin-top: 6px;
  display: inline-block;
}
#wfJinQrStatus.wf-status-pending {
  color: var(--amber);
  background: rgba(200,150,62,.1);
  border: 1px solid rgba(200,150,62,.2);
}
#wfJinQrStatus.wf-status-paid {
  color: var(--green);
  background: rgba(76,175,130,.1);
  border: 1px solid rgba(76,175,130,.2);
}
#wfJinNewBtn {
  width: 100%;
  height: 38px;
  background: transparent;
  border: 1px solid var(--border-hi);
  border-radius: var(--r-md);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
#wfJinNewBtn:hover { border-color: var(--gold-rule); color: var(--gold); }

/* Pulse dot */
@keyframes wf-jin-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .3; }
}
.wf-jin-pulse-dot {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--amber);
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  animation: wf-jin-pulse 1.6s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════════
   JIN SCANNER — camera + confirm + done
═══════════════════════════════════════════════════════════════════ */

/* Viewfinder */
#wfJinViewfinder {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #000;
  border-radius: var(--r-md);
  overflow: hidden;
}
#wfJinScanVideo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
#wfJinScanCanvas { display: none; } /* pixel sampling only — never shown */

/* Corner brackets */
#wfJinScanFrame { position: absolute; inset: 0; pointer-events: none; }
.wf-scan-corner {
  position: absolute;
  width: 22px; height: 22px;
  border-color: var(--green);
  border-style: solid;
  opacity: .9;
}
.wf-scan-corner.tl { top: 16px;    left: 16px;  border-width: 2px 0 0 2px; }
.wf-scan-corner.tr { top: 16px;    right: 16px; border-width: 2px 2px 0 0; }
.wf-scan-corner.bl { bottom: 16px; left: 16px;  border-width: 0 0 2px 2px; }
.wf-scan-corner.br { bottom: 16px; right: 16px; border-width: 0 2px 2px 0; }

/* Sweep line */
#wfJinScanLine {
  position: absolute;
  left: 16px; right: 16px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--green), transparent);
  animation: wf-scan-sweep 2s ease-in-out infinite;
  opacity: .7;
}
@keyframes wf-scan-sweep {
  0%   { top: 16px;             opacity: 0; }
  10%  { opacity: .7; }
  90%  { opacity: .7; }
  100% { top: calc(100% - 16px); opacity: 0; }
}

#wfJinScanHint {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .1em;
  color: var(--ink-3);
  text-align: center;
  margin-top: -4px;
}

/* Confirm screen */
#wfJinScanConfirmAmount {
  font-family: var(--mono);
  font-size: 28px;
  color: var(--green);
  text-align: center;
  padding: 8px 0 2px;
}
#wfJinScanConfirmDesc {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
  margin-bottom: 4px;
}
#wfJinScanMemoInput {
  width: 100%;
  height: 38px;
  padding: 0 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 11px;
  outline: none;
  transition: border-color .15s;
  box-sizing: border-box;
}
#wfJinScanMemoInput:focus { border-color: var(--border-md); }
#wfJinScanMemoInput::placeholder { color: var(--ink-4); }

#wfJinScanConfirmBtn {
  width: 100%;
  height: 46px;
  background: var(--green);
  color: #06100d;
  border: none;
  border-radius: var(--r-md);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity .15s;
  margin-top: 4px;
}
#wfJinScanConfirmBtn:hover    { opacity: .88; }
#wfJinScanConfirmBtn:disabled { opacity: .4; cursor: not-allowed; }

#wfJinScanRescanBtn {
  width: 100%;
  height: 38px;
  background: transparent;
  border: 1px solid var(--border-hi);
  border-radius: var(--r-md);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
#wfJinScanRescanBtn:hover { border-color: var(--green); color: var(--green); }

/* Done screen */
#wfJinScanStep3 { text-align: center; padding: 12px 0; }
#wfJinScanDoneIcon { font-size: 40px; color: var(--green); margin-bottom: 10px; }
#wfJinScanDoneAmount {
  font-family: var(--mono);
  font-size: 24px;
  color: var(--green);
  letter-spacing: .04em;
}
#wfJinScanDoneDesc {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 6px 0 16px;
}
#wfJinScanDoneBtn {
  width: 100%;
  height: 38px;
  background: transparent;
  border: 1px solid rgba(76,175,130,.3);
  border-radius: var(--r-md);
  color: var(--green);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .15s;
}
#wfJinScanDoneBtn:hover { border-color: var(--green); }

/* ── Mobile ── */
@media (max-width: 600px) {
  #wfJinModalPanel,
  #wfJinScanPanel { max-width: 100%; }
}

/* ===== 八字命盘 overlay — above warBox (100004) ===== */
#bzOverlay {
  z-index: 100005 !important;
  pointer-events: auto !important;
}


/* ══════════════════════════════════════════════
   COUPLE TIMELINE
══════════════════════════════════════════════ */
#wfCoupleTimelineSection {
  width: 100%;
  max-width: 680px;
}

#wfCoupleTimelineCard {
  background: var(--surface);
  border: 1px solid var(--border-md);
  border-radius: var(--r-lg);
  padding: 20px 24px 22px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.03) inset,
    0 24px 48px rgba(0,0,0,.25);
}

#wfCoupleTimelineHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

#wfCoupleTimelineTitle {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--ink);
  line-height: 1.35;
}

#wfCoupleTimelineSub {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: .04em;
  line-height: 1.6;
}

#wfCoupleTimelineBadges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.wf-ct-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--border-md);
  background: rgba(255,255,255,.04);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .08em;
}

.wf-ct-badge-compose {
  border-color: var(--gold-rule);
  color: var(--gold);
  background: var(--gold-dim);
}

#wfCoupleTimelineMeta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.wf-ct-meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: rgba(0,0,0,.14);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  min-height: 62px;
}

.wf-ct-meta-label {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.wf-ct-meta-value {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-2);
  line-height: 1.55;
}

#wfCoupleTimelineCanvasAnchor {
  width: 100%;
  min-height: 12px;
}

#wfCoupleTimelineLegend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.wf-ct-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--ink-3);
  letter-spacing: .04em;
}

.wf-ct-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.wf-ct-dot-a { background: #4aa3ff; }
.wf-ct-dot-b { background: #ff8ab3; }
.wf-ct-dot-c { background: #ffd76a; }

#wfCoupleTimelineNote {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--ink-4);
  letter-spacing: .04em;
  line-height: 1.6;
}

@media (max-width: 600px) {
  #wfCoupleTimelineCard {
    padding: 16px 16px 18px;
  }

  #wfCoupleTimelineHeader {
    flex-direction: column;
    align-items: flex-start;
  }

  #wfCoupleTimelineMeta {
    grid-template-columns: 1fr;
  }
}

/* ── Couple Timeline Form ───────────────────── */
#wfCoupleTimelineForm {
  margin: 16px 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: rgba(0,0,0,.12);
}

.wf-ct-form-title {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
}

.wf-ct-form-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 10px;
}

.wf-ct-form-row:last-child {
  margin-bottom: 0;
}

.wf-ct-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.wf-ct-label {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.wf-ct-field input,
.wf-ct-field select {
  background: rgba(0,0,0,.35);
  border: 1px solid var(--border-md);
  border-radius: var(--r);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  height: 36px;
  padding: 0 10px;
  outline: none;
  transition: border-color .15s;
  -webkit-appearance: none;
  appearance: none;
}

.wf-ct-field input:focus,
.wf-ct-field select:focus {
  border-color: var(--gold-rule);
}

#wfCtRunBtn {
  height: 36px;
  padding: 0 18px;
  background: var(--gold);
  color: #06100d;
  border: none;
  border-radius: var(--r-md);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}

#wfCtRunBtn:hover {
  background: var(--gold-lt);
}

@media (max-width: 600px) {
  .wf-ct-form-row {
    flex-direction: column;
    align-items: stretch;
  }

  .wf-ct-field,
  #wfCtRunBtn {
    width: 100% !important;
  }
}

.wf-ct-mode-hint {
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .04em;
  color: var(--ink-4);
  line-height: 1.6;
}

#wfHeaderMeta {
  gap: 10px;
}

#wfHeaderJinMenu {
  position: relative;
  flex-shrink: 0;
}

#wfHeaderJinMenuBtn {
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--border-md);
  border-radius: var(--r);
  font-size: 18px;
  line-height: 1;
}

#wfHeaderJinMenuPanel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 176px;
  padding: 8px;
  background: var(--bg-paper);
  border: 1px solid var(--border-md);
  border-radius: var(--r-md);
  box-shadow: 0 18px 36px rgba(0,0,0,.35);
  z-index: 450;
}

#wfHeaderJinMenuPanel[hidden] {
  display: none !important;
}

.wf-header-menu-balance {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}

.wf-header-menu-label {
  display: block;
  font-family: var(--mono);
  font-size: 8px;
  color: var(--ink-4);
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

#wfHeaderJinMenuPanel #wfJinBadge {
  display: inline-block;
  max-width: 100%;
  white-space: normal;
}

#wfHeaderJinMenuPanel #wfJinRequestBtn,
#wfHeaderJinMenuPanel #wfJinScanBtn {
  width: 100%;
  justify-content: flex-start;
  padding: 8px 10px;
}

@media (max-width: 520px) {
  #wfHeaderInner {
    padding: 0 12px;
  }

  #wfHeaderMeta {
    gap: 8px;
  }

  #wfMemberBadge {
    display: none !important;
  }

  #wfHeaderJinMenuPanel {
    right: 0;
  }
}