/* ============================================================
 * style.css — 八字排盘 H5 通用样式系统（淡金暖黄主题）
 * ============================================================ */
:root {
  --bg-0: #fdf8ed; --bg-1: #fffaf0; --bg-2: #fef5e6; --bg-3: #faf0dc;
  --line: #e8dcc8;
  --text-0: #4a3728; --text-1: #6b5344; --text-2: #8c7a66; --text-3: #b0a08e;
  --gold: #b8860b; --gold-2: #9a7207; --gold-dim: #c9a84c;
  --red: #c0392b; --green: #27ae60; --blue: #2980b9; --orange: #d35400; --teal: #16a085;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { background: #fdf8ed; color: var(--text-1);
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
body { display: flex; justify-content: center; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input { font-family: inherit; }

/* ---------- 应用框架（桌面预览限宽居中） ---------- */
.app {
  width: 100%; max-width: 460px; height: 100vh; min-height: 100vh;
  display: flex; flex-direction: column;
  background: var(--bg-0); position: relative; overflow: hidden;
  box-shadow: 0 0 60px rgba(0,0,0,.6);
}
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; }
.view { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: calc(56px + var(--safe-bottom)); }
.view::-webkit-scrollbar { width: 0; }

/* ---------- 状态栏（H5 模式隐藏） ---------- */
.statusbar { display: none; }

/* ---------- 顶部栏 ---------- */
.topbar {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  padding: 8px 16px; background: linear-gradient(180deg, #f5e6c8, var(--bg-0));
  border-bottom: 1px solid var(--line); position: relative;
}
.topbar::after {
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 60%; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.topbar .back, .topbar .act { color: var(--text-2); font-size: 13px; min-width: 44px; }
.topbar .act { text-align: right; }
.topbar .title { color: var(--text-0); font-size: 15px; letter-spacing: 2px; }
.topbar .title .sub { display: block; font-size: 10px; color: var(--text-2); letter-spacing: 1px; text-align: center; }

/* ---------- 主 tab（基本/命盘/细盘/大运/流年/提示） ---------- */
.tabbar {
  flex: 0 0 auto; display: flex; background: var(--bg-1); border-bottom: 1px solid var(--line);
  position: relative; z-index: 10; touch-action: manipulation;
}
.tabbar .tab {
  flex: 1; text-align: center; padding: 11px 0 9px; font-size: 13px;
  color: var(--text-2); letter-spacing: 1px; position: relative;
}
.tabbar .tab.active { color: var(--gold-2); }
.tabbar .tab.active::after {
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 26px; height: 2px; background: var(--gold);
}
.tabbar .tab .ico { display: block; font-size: 13px; margin-bottom: 2px; color: var(--text-3); }
.tabbar .tab.active .ico { color: var(--gold); }

/* ---------- 区块标题（左对齐金线小标题） ---------- */
.block-head {
  display: flex; align-items: center; gap: 8px; padding: 14px 16px 4px; margin-top: 4px;
}
.block-head::before { content: ""; width: 3px; height: 13px; background: var(--gold); border-radius: 2px; flex: 0 0 3px; }
.block-head .t { font-size: 13px; color: var(--gold-2); letter-spacing: 3px; }
.block-head .s { font-size: 10px; color: var(--text-2); letter-spacing: 1px; }

/* ---------- 居中大标题（四柱/八卦类） ---------- */
.center-head { text-align: center; padding: 14px 0 10px; background: linear-gradient(180deg, #f5e6c8, var(--bg-1)); }
.center-head .t { font-size: 16px; color: var(--gold-2); letter-spacing: 6px; }
.center-head .s { font-size: 10px; color: var(--text-2); letter-spacing: 2px; margin-top: 2px; }

/* ---------- 卡片 ---------- */
.card { background: var(--bg-1); border: 1px solid var(--line); border-radius: 8px; padding: 14px; margin: 10px 14px; }
.card-title { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--gold); letter-spacing: 2px; margin-bottom: 10px; }
.card-title .r { color: var(--text-3); font-size: 10px; }
.card-title .lock { color: var(--gold); }

/* ---------- 信息行 ---------- */
.info-list { margin: 10px 14px; background: var(--bg-1); border: 1px solid var(--line); border-radius: 8px; padding: 2px 0; }
.info-list .r { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 14px; }
.info-list .r:last-child { border-bottom: none; }
.info-list .r .k { color: var(--text-2); letter-spacing: 2px; font-weight: 500; min-width: 3.6em; flex-shrink: 0; }
.info-list .r .v { color: var(--text-0); text-align: right; font-size: 15px; font-weight: 500; }
.info-list .r .v .hi { color: var(--gold-2); }

/* ---------- 我的·登录/注册 & 个人卡片 ---------- */
.me-card { margin: 12px 14px; background: linear-gradient(135deg, #f5e6c8, #fef3dc); border: 1px solid var(--line); border-radius: 12px; padding: 20px 14px; text-align: center; }
.me-card .avatar { width: 58px; height: 58px; border-radius: 50%; margin: 0 auto 10px; background: linear-gradient(135deg, var(--gold-2), var(--gold-dim)); color: #fff; font-size: 26px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.me-card .acc { color: var(--text-0); font-size: 16px; letter-spacing: 1px; }
.me-card .login-type { color: var(--text-2); font-size: 11px; margin-top: 5px; letter-spacing: 1px; }

.login-card { margin: 12px 14px; background: var(--bg-1); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.login-tabs { display: flex; border-bottom: 1px solid var(--line); }
.login-tabs .t { flex: 1; text-align: center; padding: 12px 0; color: var(--text-2); font-size: 13px; letter-spacing: 2px; cursor: pointer; }
.login-tabs .t.on { color: var(--gold-2); border-bottom: 2px solid var(--gold-2); }
.login-body { padding: 18px 16px; }
.login-body .login-input { width: 100%; padding: 11px 12px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; color: var(--text-0); font-size: 14px; outline: none; -webkit-appearance: none; margin-bottom: 12px; }
.login-body .login-input::placeholder { color: var(--text-3); }
.code-row { display: flex; gap: 8px; margin-bottom: 12px; }
.code-row .login-input { flex: 1; margin-bottom: 0; }
.code-btn { flex: none; padding: 0 14px; border-radius: 8px; background: transparent; border: 1px solid var(--gold-2); color: var(--gold-2); font-size: 12px; letter-spacing: 1px; }
.login-hint { color: #e0894a; font-size: 11px; min-height: 16px; margin: 0 0 10px; line-height: 1.5; }
.login-submit { width: 100%; height: 46px; border-radius: 10px; background: linear-gradient(135deg, var(--gold-2), var(--gold-dim)); color: #fff; font-size: 15px; font-weight: 600; letter-spacing: 4px; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(184,134,11,.25); }
.logout-btn { display: block; margin: 16px 14px 0; padding: 12px; border-radius: 8px; background: var(--bg-1); border: 1px solid var(--line); color: var(--text-2); font-size: 13px; letter-spacing: 2px; text-align: center; }

/* ---------- 小莲智能系统 ---------- */
.smart { margin: 10px 14px; background: linear-gradient(135deg, #f5e6c8, var(--bg-1)); border: 1px solid var(--gold-dim); border-radius: 8px; padding: 12px; }
.smart-title { font-size: 11.5px; color: var(--gold-2); letter-spacing: 2px; margin-bottom: 10px; }
.smart-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.smart-grid .c { background: rgba(139,115,55,.1); border: 1px solid rgba(184,134,11,.2); border-radius: 5px; padding: 7px 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.smart-grid .c .k { color: var(--text-3); font-size: 9.5px; letter-spacing: 0.5px; line-height: 1.3; }
.smart-grid .c .v { color: var(--gold-2); font-size: 13px; font-weight: 700; margin-top: 2px; line-height: 1.3; }

/* ---------- 八字喜用 ---------- */
.xy-block { margin: 10px 14px; background: linear-gradient(135deg, #f5e6c8, var(--bg-1)); border: 1px solid var(--gold-dim); border-radius: 8px; padding: 10px 12px; }
.xy-title { font-size: 11.5px; color: var(--gold-2); letter-spacing: 2px; margin-bottom: 8px; }
.xy-lv { color: var(--text-2); font-size: 10.5px; letter-spacing: 0; margin-left: 4px; font-weight: 400; }
.xy-grid { display: flex; flex-wrap: wrap; }
.xy-cell { display: flex; align-items: center; width: 50%; padding: 4px 0; }
.xy-cell.xy-full { width: 100%; border-top: 1px dashed rgba(200,163,90,.1); margin-top: 2px; padding-top: 6px; }
.xy-k { flex: 0 0 56px; color: var(--text-3); font-size: 11px; letter-spacing: 0.5px; }
.xy-v { flex: 1; color: var(--text-0); font-size: 12px; line-height: 1.6; min-width: 0; }
.wx-tag { display: inline-block; padding: 1px 8px; margin: 1px 3px 1px 0; border-radius: 3px; font-size: 12px; font-weight: 700; border: 1px solid currentColor; }
.wx-tag.w-jin { color: #d9b34d; background: rgba(217,179,77,.1); }
.wx-tag.w-mu  { color: #5e9a6e; background: rgba(94,154,110,.1); }
.wx-tag.w-shui { color: #5e7fb3; background: rgba(94,127,179,.1); }
.wx-tag.w-huo { color: #c8463c; background: rgba(200,70,60,.1); }
.wx-tag.w-tu  { color: #d28a3a; background: rgba(210,138,58,.1); }

/* ---------- 五行 tab ---------- */
.wx-pill { display: flex; margin: 0 14px; background: var(--bg-1); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.wx-pill .p { flex: 1; text-align: center; padding: 9px 0; font-size: 12px; color: var(--text-2); letter-spacing: 1px; }
.wx-pill .p.on { color: var(--gold-2); background: rgba(200,163,90,.08); position: relative; }
.wx-pill .p.on::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 20px; height: 1.5px; background: var(--gold); }

/* ---------- 五行能量卡 ---------- */
.wuxing-card { margin: 10px 14px; background: var(--bg-1); border: 1px solid var(--line); border-radius: 8px; padding: 14px; }
.wuxing-title { font-size: 12px; color: var(--gold); letter-spacing: 2px; margin-bottom: 12px; }
.wuxing-bar { position: relative; height: 8px; background: var(--bg-3); border-radius: 4px; overflow: hidden; }
.wuxing-bar > div { position: absolute; top: 0; height: 100%; }
.wuxing-row { display: flex; align-items: center; font-size: 13px; margin-top: 10px; gap: 10px; }
.wuxing-row .wx-name { font-weight: 600; min-width: 1.2em; font-size: 14px; }
.wuxing-row .wx-bar-track { flex: 1; height: 10px; background: rgba(255,255,255,.06); border-radius: 5px; overflow: hidden; position: relative; }
.wuxing-row .wx-bar-fill { height: 100%; border-radius: 5px; transition: width .6s ease; box-shadow: 0 0 8px rgba(255,255,255,.12); }
.wuxing-row .wx-val { min-width: 48px; text-align: right; font-weight: 500; color: var(--text-2); font-size: 12px; }
.wuxing-meta { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 10px; color: var(--text-2); line-height: 1.7; }

/* ---------- 四柱网格 ---------- */
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); margin: 10px 14px; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); }
.grid4 .cell { background: var(--bg-1); padding: 12px 4px; text-align: center; }
.grid4 .cell .lab { color: var(--text-2); font-size: 10px; letter-spacing: 1px; margin-bottom: 6px; }
.grid4 .cell .ch { font-size: 20px; font-weight: 500; line-height: 1.25; }
.grid4 .cell .ss { font-size: 11px; line-height: 1; margin-bottom: 4px; color: var(--gold-2); }
.grid4 .cell .cg { font-size: 12px; line-height: 1.25; margin-top: 7px; letter-spacing: 1px; }
.grid4 .cell .cg .cg-k { color: var(--text-3); font-size: 10px; margin-right: 3px; letter-spacing: 0; }
.grid4 .cell .ny { font-size: 10px; color: var(--text-3); margin-top: 5px; letter-spacing: .5px; }
.grid4 .cell .sx { font-size: 9px; color: var(--text-3); margin-top: 3px; }

/* 多列网格（细盘/大运用） */
.grid-n { display: grid; gap: 1px; background: var(--line); margin: 8px 14px; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); }
.grid-n .cell { background: var(--bg-1); padding: 9px 2px; text-align: center; }
.grid-n .cell .lab { color: var(--text-2); font-size: 9px; letter-spacing: .5px; margin-bottom: 4px; }
.grid-n .cell .ch { font-size: 15px; font-weight: 500; line-height: 1.2; }

/* 运势解读（财运/事业/贵人/健康） */
.fortunes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 8px 14px 4px; }
.ft-card { background: var(--bg-1); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.ft-h { font-size: 13px; color: var(--gold-2); letter-spacing: 1px; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.ft-ico { font-size: 14px; }
.ft-d { font-size: 11.5px; line-height: 1.7; color: var(--text-0); }

/* ---------- 流年运势（今年+未来5年） ---------- */
.yf-block { margin: 10px 14px 6px; }
.yf-title { font-size: 12px; color: var(--gold-2); letter-spacing: 1.5px; margin-bottom: 8px; padding-bottom: 5px; border-bottom: 1px dashed rgba(200,163,90,.15); }
/* 今年详解 */
.yf-cur { background: linear-gradient(135deg, rgba(184,134,11,.08), rgba(254,248,230,.95)); border: 1px solid rgba(184,134,11,.2); border-radius: 8px; padding: 12px; margin-bottom: 6px; }
.yf-cur-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.yf-cur-y { font-size: 20px; font-weight: 700; color: var(--gold); }
.yf-cur-gz { font-size: 15px; color: var(--gold-2); font-weight: 600; }
.yf-cur-age { font-size: 11px; color: var(--text-3); background: rgba(200,163,90,.1); padding: 1px 6px; border-radius: 4px; }
.yf-cur-lvl { font-size: 11.5px; padding: 2px 8px; border-radius: 4px; margin-left: auto; font-weight: 600; }
.sl-daji { background: rgba(220,38,38,.15); color: #f87171; }
.sl-ji { background: rgba(234,179,8,.15); color: #facc15; }
.sl-ping { background: rgba(156,163,175,.15); color: #9ca3af; }
.sl-xiong { background: rgba(251,146,60,.15); color: #fb923c; }
.sl-daxiong { background: rgba(127,29,29,.2); color: #ef4444; }
/* 四维进度条 */
.yf-cur-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin-bottom: 8px; }
.yf-cur-bar { display: flex; align-items: center; gap: 6px; }
.yf-cur-bar label { font-size: 10.5px; color: var(--text-3); width: 28px; flex-shrink: 0; }
.yf-cbar { flex: 1; height: 6px; background: rgba(255,255,255,.06); border-radius: 3px; overflow: hidden; }
.yf-cfill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--gold-dim), var(--gold)); transition: width .4s; }
.yf-cur-bar span:last-child { font-size: 11px; color: var(--gold-2); width: 22px; text-align: right; font-weight: 600; }
/* 吉凶提示 */
.yf-cur-notes, .yf-cur-warns { display: flex; flex-wrap: wrap; gap: 5px; }
.yf-cn { font-size: 10.5px; color: #86efac; background: rgba(34,197,94,.08); padding: 2px 7px; border-radius: 4px; }
.yf-cw { font-size: 10.5px; color: #fca5a5; background: rgba(239,68,68,.08); padding: 2px 7px; border-radius: 4px; }

/* 未来5年列表 — 卡片式 */
.yf-list { display: flex; flex-direction: column; gap: 8px; }
.yf-card { background: var(--bg-1); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.yf-card-top { display: flex; align-items: center; gap: 7px; padding: 9px 12px; }
.yf-y { font-size: 17px; font-weight: 700; color: var(--gold); min-width: 42px; }
.yf-gz { font-size: 12px; color: var(--gold-2); font-weight: 600; min-width: 36px; }
.yf-age { font-size: 10px; color: var(--text-3); background: rgba(200,163,90,.08); padding: 1px 6px; border-radius: 3px; }
.yf-bar-wrap { flex: 1; min-width: 50px; }
.yf-bar-bg { height: 6px; background: rgba(255,255,255,.06); border-radius: 3px; overflow: hidden; }
.yf-bar-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, #c8a35a, #e8c97a); }
.yf-lvl { font-style: normal; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 4px; }
.yf-d { font-size: 10px; padding: 2px 6px; border-radius: 4px; color: var(--text-2); background: rgba(255,255,255,.04); font-weight: 600; }
.yf-good { color: #86efac !important; background: rgba(34,197,94,.1) !important; }
.yf-bad { color: #fca5a5 !important; background: rgba(239,68,68,.1) !important; }
/* 注意事项区域 */
.yf-card-tips { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 12px 8px; border-top: 1px dashed rgba(200,163,90,.1); padding-top: 7px; }
.yf-tip { font-size: 10px; line-height: 1.55; color: var(--text-0); }
.grid-n .cell .sx { font-size: 9px; color: var(--text-3); margin-top: 3px; }
.grid-n .cell.hl { background: rgba(200,163,90,.12); }
.grid-n .cell.hl .lab, .grid-n .cell.hl .sx { color: var(--gold-2); }
.grid-n .cell.hl { box-shadow: inset 0 0 0 1px var(--gold); }

/* ---------- 子卡片 / 两列列表 / 药丸 ---------- */
.subcard { margin: 10px 14px; background: var(--bg-1); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.subcard .t { font-size: 12px; color: var(--gold); letter-spacing: 2px; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.subcard .t::before { content: ""; width: 3px; height: 12px; background: var(--gold); }
.subcard .desc { font-size: 12px; color: var(--text-1); line-height: 1.8; }
.ss-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 12px; }
.ss-col { min-width: 0; }
.ss-col .muted { font-size: 11px; }
.list-2col .r { display: flex; justify-content: space-between; padding: 6px 0; font-size: 12px; border-bottom: 1px dashed var(--line); }
.list-2col .r:last-child { border-bottom: none; }
.list-2col .r .k { color: var(--text-2); letter-spacing: 1px; flex: 0 0 64px; }
.list-2col .r .v { color: var(--text-0); text-align: right; flex: 1; }
.pills-row { display: flex; flex-wrap: wrap; gap: 4px; }
.pill { font-size: 10px; padding: 1px 6px; border-radius: 8px; display: inline-block; }
.pill-r { background: rgba(200,70,60,.15); color: #d99690; border: 1px solid rgba(200,70,60,.3); }
.pill-g { background: rgba(90,143,90,.15); color: #92b692; border: 1px solid rgba(90,143,90,.3); }
.pill-b { background: rgba(94,127,179,.15); color: #a5b5cf; border: 1px solid rgba(94,127,179,.3); }
.pill-gold { background: rgba(200,163,90,.15); color: var(--gold-2); border: 1px solid rgba(200,163,90,.3); }
.pill-ghost { background: transparent; color: var(--text-3); border: 1px dashed var(--text-3); }

/* ---------- 提示框 ---------- */
.ts-tip { margin: 10px 14px; padding: 10px 12px; background: rgba(200,163,90,.05); border-left: 2px solid var(--gold); border-radius: 0 6px 6px 0; font-size: 11px; color: var(--text-1); line-height: 1.7; }
.ts-tip .h { color: var(--gold-2); font-weight: 500; margin-bottom: 4px; }

/* ---------- 五行文字色 ---------- */
.w-jin { color: #d9b34d; } .w-mu { color: #5e9a6e; } .w-shui { color: #5e7fb3; }
.w-huo { color: #c8463c; } .w-tu { color: #d28a3a; }

/* ---------- VIP 引导 ---------- */
.vip-gate { margin: 14px; border-radius: 8px; padding: 22px 16px; text-align: center;
  background: linear-gradient(135deg, rgba(200,163,90,.12), rgba(200,163,90,.02)); border: 1px dashed var(--gold-dim); }
.vip-gate .t { color: var(--gold-2); font-size: 13px; letter-spacing: 2px; margin-bottom: 6px; }
.vip-gate .d { color: var(--text-2); font-size: 11px; letter-spacing: 1px; margin-bottom: 12px; line-height: 1.7; }
.vip-btn { display: inline-block; padding: 8px 18px; border-radius: 16px; background: linear-gradient(135deg, var(--gold-2), var(--gold-dim)); color: #fff; font-size: 12px; letter-spacing: 2px; font-weight: 600; }
.lock-mark { color: var(--gold); font-size: 9px; vertical-align: super; }

/* ---------- 输入页 ---------- */
.p1 { display: flex; flex-direction: column; min-height: 100%; position: relative; }
.p1-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, #f5e0a8 0%, var(--bg-0) 60%), var(--bg-0); }
.p1-bg::after { content: ""; position: absolute; inset: 0; opacity: .12; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><g fill='none' stroke='%23c8a35a' stroke-width='.4' opacity='.4'><circle cx='100' cy='100' r='40'/><circle cx='100' cy='100' r='55'/><circle cx='100' cy='100' r='70'/><circle cx='100' cy='100' r='85'/><line x1='20' y1='100' x2='180' y2='100'/><line x1='100' y1='20' x2='100' y2='180'/><line x1='40' y1='40' x2='160' y2='160'/><line x1='160' y1='40' x2='40' y2='160'/></g></svg>");
  background-size: 280px 280px; background-position: center 60px; background-repeat: no-repeat; }
.p1-content { position: relative; z-index: 1; padding: 8px 0 20px; }
.brand { text-align: center; padding: 22px 0 6px; }
.brand .logo { width: 62px; height: 62px; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 0 10px rgba(200,163,90,.35)); cursor: pointer; border-radius: 50%; transition: transform .05s; }
.brand .logo:active { transform: scale(.92); }
.brand .logo svg { transition: transform 1.2s cubic-bezier(.22,.61,.36,1); transform-origin: center; }
.brand .logo.spinning svg { transform: rotate(360deg); }
.brand h2 { font-size: 19px; color: var(--gold-2); letter-spacing: 8px; font-weight: 500; padding-left: 8px; }
.brand .slogan { font-size: 11px; color: var(--text-2); letter-spacing: 4px; margin-top: 4px; }

.form-card { margin: 16px 18px 0; background: rgba(254,250,230,.8); border: 1px solid var(--gold-dim); border-radius: 8px; padding: 6px 16px; backdrop-filter: blur(4px); }
.form-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-bottom: 1px dashed var(--line); }
.form-row:last-child { border-bottom: none; }
.form-row.ts-row { cursor: pointer; }
.toggle { width: 42px; height: 24px; border-radius: 12px; background: var(--bg-1); border: 1px solid var(--line); position: relative; transition: background .2s, border-color .2s; flex: none; }
.toggle.on { background: linear-gradient(135deg, var(--gold-2), var(--gold-dim)); border-color: transparent; }
.toggle .knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: left .2s; }
.toggle.on .knob { left: 21px; }
.region-sel { -webkit-appearance: none; appearance: none; padding-right: 2px; }
.form-row label { color: var(--text-2); font-size: 13px; letter-spacing: 1px; }
.form-row .val { color: var(--text-0); font-size: 13px; display: flex; align-items: center; gap: 6px; }
.form-row .val .arrow { color: var(--text-3); font-size: 10px; }
.form-row .form-input {
  flex: 1; margin-left: 12px; text-align: right; background: transparent; border: none;
  color: var(--text-0); font-size: 13px; outline: none; -webkit-appearance: none;
}
.form-row .form-input::placeholder { color: var(--text-3); }
.form-row .val.on { color: var(--gold-2); }
.region-sels { display: flex; gap: 8px; flex: 1; margin-left: 12px; justify-content: flex-end; }
.region-sels .region-sel { flex: 1; text-align: right; background: transparent; border: none; color: var(--text-0); font-size: 13px; outline: none; -webkit-appearance: none; }
.region-sels .region-sel:last-child { text-align: right; }

/* 干支模式选择 */
.gz-grid { margin: 14px 14px 0; background: rgba(254,250,230,.8); border: 1px solid var(--gold-dim); border-radius: 8px; padding: 4px 8px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }
.gz-grid .cell { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px; border-bottom: 1px dashed var(--line); }
.gz-grid .cell:nth-child(odd) { border-right: 1px dashed var(--line); }
.gz-grid .cell:nth-last-child(-n+2) { border-bottom: none; }
.gz-grid .cell .k { color: var(--text-2); font-size: 13px; letter-spacing: 1px; }
.gz-grid .gz-sel {
  background: var(--bg-2); color: var(--gold-2); border: 1px solid var(--gold-dim);
  border-radius: 6px; padding: 5px 8px; font-size: 14px; outline: none; -webkit-appearance: none;
}
.gz-grid .gz-sel:focus { border-color: var(--gold); }
.seg-tabs { display: flex; margin: 16px 18px 0; background: var(--bg-1); border-radius: 8px; padding: 3px; }
.seg-tabs .t { flex: 1; text-align: center; padding: 8px 0; font-size: 12px; color: var(--text-2); letter-spacing: 2px; border-radius: 6px; }
.seg-tabs .t.on { background: linear-gradient(180deg, var(--gold-2), var(--gold-dim)); color: #fff; font-weight: 600; }
.num-grid { margin: 14px 18px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.num-grid .cell { background: var(--bg-1); border: 1px solid var(--line); border-radius: 6px; padding: 12px 4px; text-align: center; min-height: 64px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.num-grid .cell .k { color: var(--text-2); font-size: 11px; letter-spacing: 1px; line-height: 1.2; }
.num-grid .cell .v { color: var(--text-0); font-size: 20px; font-weight: 600; margin-top: 6px; letter-spacing: 2px; width: 100%; text-align: center; background: transparent; border: none; outline: none; -webkit-appearance: none; }
.num-grid .cell .v.on { color: var(--gold-2); }
.link-row { margin: 10px 18px 0; display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: rgba(200,163,90,.07); border: 1px dashed rgba(200,163,90,.35); border-radius: 8px; font-size: 12px; color: var(--text-2); }
.link-row .lk-ico { font-size: 14px; }
.link-row .lk-main { flex: 1; }
.link-row .lk-main b { color: var(--gold-2); font-weight: 600; }
.link-row .lk-val { font-weight: 600; }
.link-row .lk-today { flex: none; padding: 4px 10px; border: 1px solid var(--gold-dim); border-radius: 14px; color: var(--gold-2); font-size: 11px; letter-spacing: 1px; }
.link-row .lk-today:active { background: rgba(200,163,90,.18); }
.warn { margin: 14px 18px 0; padding: 10px 12px; background: rgba(200,70,60,.08); border: 1px solid rgba(200,70,60,.3); border-radius: 6px; color: #d99a92; font-size: 11px; line-height: 1.7; display: flex; gap: 8px; }
.submit { margin: 22px 18px 0; height: 48px; border-radius: 12px; width: calc(100% - 36px); left: 18px; position: relative; background: linear-gradient(135deg, var(--gold-2), var(--gold-dim)); color: #fff; font-size: 16px; font-weight: 600; letter-spacing: 6px; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 6px 20px rgba(184,134,11,.3); }
.submit::before { content: "☯"; font-size: 16px; }
.foot-note { margin: 16px 18px 0; text-align: center; color: var(--text-3); font-size: 10px; letter-spacing: 2px; }
.picker-mask { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 50; }
.picker { position: absolute; left: 0; right: 0; bottom: 0; background: var(--bg-2); border-radius: 12px 12px 0 0; padding: 12px; }
.picker .ph { display: flex; justify-content: space-between; padding: 4px 6px 10px; }
.picker .ph .cancel { color: var(--text-2); } .picker .ph .ok { color: var(--gold-2); font-weight: 600; }
.picker .opts { max-height: 240px; overflow-y: auto; }
.picker .opts .o { padding: 11px; text-align: center; font-size: 14px; color: var(--text-1); border-bottom: 1px solid var(--line); }
.picker .opts .o.on { color: var(--gold-2); }

/* ---------- 底部导航 ---------- */
.tabbar-bottom { position: absolute; left: 0; right: 0; bottom: 0; height: calc(54px + var(--safe-bottom)); padding-bottom: var(--safe-bottom);
  display: flex; background: rgba(253,245,230,.95); border-top: 1px solid var(--line); z-index: 20; }
.tabbar-bottom .item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--text-2); font-size: 10px; letter-spacing: 1px; }
.tabbar-bottom .item .ico { font-size: 17px; }
.tabbar-bottom .item.active { color: var(--gold-2); }

/* ---------- 案例展示 ---------- */
.case-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 12px 14px; }
.case-item { background: var(--bg-1); border: 1px solid var(--line); border-radius: 8px; padding: 12px; }
.case-item .t { color: var(--text-0); font-size: 13px; letter-spacing: 1px; }
.case-item .s { color: var(--text-2); font-size: 10px; margin-top: 4px; }
.case-item .bz { color: var(--gold-2); font-size: 12px; margin-top: 6px; letter-spacing: 1px; }

/* ---------- 断事笔记 ---------- */
.note-tabs { display: flex; margin: 12px 14px 0; border: 1px solid var(--gold-dim); border-radius: 6px; overflow: hidden; }
.note-tabs .t { flex: 1; text-align: center; padding: 9px 0; font-size: 12px; color: var(--text-2); letter-spacing: 2px; }
.note-tabs .t.on { background: linear-gradient(180deg, var(--gold-2), var(--gold-dim)); color: #fff; font-weight: 600; }
.note-empty { margin: 24px 14px; padding: 50px 0; text-align: center; color: var(--text-2); font-size: 13px; letter-spacing: 2px; }
.note-empty .ic { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; background: rgba(200,163,90,.05); border: 1px dashed var(--gold-dim); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 24 24' fill='none' stroke='%237a6238' stroke-width='1.5'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><path d='M14 2v6h6M16 13H8M16 17H8M10 9H8'/></svg>"); background-repeat: no-repeat; background-position: center; }
.note-item { margin: 10px 14px; background: var(--bg-1); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.note-item .who { font-size: 12px; color: var(--gold-2); margin-bottom: 6px; }
.note-item .body { font-size: 12px; color: var(--text-1); line-height: 1.8; }

.hidden { display: none !important; }
.fade { animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ========== IM 信息页 ========== */
.im-page { display: flex; flex-direction: column; height: 100%; background: var(--bg-0); }

/* header */
.im-header { display: flex; align-items: center; padding: 12px 16px; background: rgba(253,245,230,.95); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(8px); gap: 10px; flex: none; }
.im-title { font-size: 17px; font-weight: 600; color: var(--text-0); letter-spacing: 2px; }
.im-actions { margin-left: auto; }
.im-action { font-size: 12px; color: var(--gold-2); padding: 4px 10px; border: 1px solid var(--gold-dim); border-radius: 12px; cursor: pointer; }

/* chat header */
.im-chat-header { padding: 8px 12px; }
.im-back { font-size: 24px; color: var(--text-0); width: 28px; cursor: pointer; text-align: center; line-height: 1; }
.im-avatar-sm { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--gold-dim), #3a2a14); display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--gold-2); position: relative; flex: none; }
.im-avatar-sm.online::after { content: ''; position: absolute; bottom: 0; right: 0; width: 9px; height: 9px; border-radius: 50%; background: #4ade80; border: 2px solid var(--bg-0); }
.im-chat-info { flex: 1; min-width: 0; }
.im-chat-info .im-name { font-size: 15px; color: var(--text-0); font-weight: 500; }
.im-status { font-size: 11px; color: var(--text-3); }
.im-chat-actions { font-size: 20px; color: var(--text-2); cursor: pointer; padding: 4px; }

/* message list */
.im-list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.im-list::-webkit-scrollbar { width: 0; }
.im-item { display: flex; align-items: center; padding: 13px 16px; gap: 12px; cursor: pointer; transition: background .15s; border-bottom: 1px solid rgba(200,163,90,.06); }
.im-item:active { background: rgba(200,163,90,.08); }
.im-avatar { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, var(--gold-dim), #3a2a14); display: flex; align-items: center; justify-content: center; font-size: 17px; color: var(--gold-2); position: relative; flex: none; }
.im-avatar.online::after { content: ''; position: absolute; bottom: 1px; right: 1px; width: 10px; height: 10px; border-radius: 50%; background: #4ade80; border: 2px solid var(--bg-0); }
.im-body { flex: 1; min-width: 0; }
.im-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; }
.im-name { font-size: 14px; color: var(--text-0); font-weight: 500; }
.im-time { font-size: 11px; color: var(--text-3); flex: none; margin-left: 8px; }
.im-preview { font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.im-badge { width: 18px; height: 18px; border-radius: 50%; background: #e53e3e; color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center; flex: none; font-weight: 600; }

/* chat messages */
.im-msgs { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.im-msgs::-webkit-scrollbar { width: 0; }
.msg-row { display: flex; gap: 6px; max-width: 82%; }
.msg-row.me { align-self: flex-end; flex-direction: row-reverse; }
.msg-row.them { align-self: flex-start; }
.avatar-mini { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--gold-dim), #3a2a14); display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--gold-2); flex: none; margin-top: 4px; }
.msg-bubble { padding: 9px 12px; border-radius: 12px; font-size: 13px; line-height: 1.6; color: var(--text-0); position: relative; word-break: break-word; }
.msg-bubble.them { background: rgba(245,240,230,.9); border: 1px solid var(--line); border-bottom-left-radius: 3px; }
.msg-bubble.me { background: linear-gradient(135deg, var(--gold-2), var(--gold-dim)); color: #fff; border-bottom-right-radius: 3px; }
.msg-sender { font-size: 11px; color: var(--gold-2); margin-bottom: 3px; font-weight: 500; }
.msg-time { font-size: 10px; color: var(--text-3); margin-top: 5px; text-align: right; }
.msg-bubble.me .msg-time { color: rgba(26,20,8,.45); }

/* input bar */
.im-input-bar { display: flex; align-items: center; padding: 10px 14px; gap: 8px; background: rgba(253,245,230,.97); border-top: 1px solid var(--line); flex: none; }
.im-input { flex: 1; background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 18px; padding: 9px 14px; font-size: 13px; color: var(--text-0); outline: none; -webkit-appearance: none; }
.im-input::placeholder { color: var(--text-3); }
.im-send { padding: 7px 16px; border-radius: 16px; background: linear-gradient(135deg, var(--gold-2), var(--gold-dim)); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; letter-spacing: 2px; flex: none; user-select: none; }

/* ---------- 袁天罡称骨 ---------- */
.cg-card { margin: 12px 14px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.cg-banner { height: 70px; background: linear-gradient(135deg, #8b6914, #5c4510, #3d2e0a), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100"><circle cx="100" cy="50" r="35" fill="none" stroke="%23c9a84c22" stroke-width="1"/><circle cx="100" cy="50" r="28" fill="none" stroke="%23c9a84c18" stroke-width="1"/><line x1="100" y1="15" x2="100" y2="85" stroke="%23c9a84c15" stroke-width="1"/><line x1="65" y1="50" x2="135" y2="50" stroke="%23c9a84c15" stroke-width="1"/><line x1="75" y1="25" x2="125" y2="75" stroke="%23c9a84c12" stroke-width="1"/><line x1="125" y1="25" x2="75" y2="75" stroke="%23c9a84c12" stroke-width="1"/></svg>') center/cover no-repeat; display: flex; align-items: center; justify-content: center; position: relative; }
.cg-blabel { background: rgba(255,255,255,.9); border: 1px solid rgba(184,134,11,.4); padding: 5px 16px; border-radius: 4px; font-size: 14px; font-weight: 700; color: #4a3728; letter-spacing: 3px; }
.cg-body { padding: 14px 16px 16px; position: relative; }
.cg-title { font-size: 17px; font-weight: 700; color: var(--text-0); text-align: center; margin-bottom: 6px; letter-spacing: 2px; }
.cg-weight { text-align: center; margin-bottom: 10px; }
.cg-wz { font-size: 20px; font-weight: 800; color: var(--gold-2); letter-spacing: 2px; }
.cg-total { font-size: 11.5px; color: var(--text-3); margin-left: 6px; }
.cg-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin-bottom: 10px; padding: 8px 10px; background: rgba(184,134,11,.05); border-radius: 6px; }
.cg-row { display: flex; justify-content: space-between; align-items: center; }
.cg-k { font-size: 11.5px; color: var(--text-2); }
.cg-v { font-size: 12px; font-weight: 600; color: var(--gold-2); }
.cg-verse { font-size: 12.5px; line-height: 1.85; color: var(--text-1); padding: 10px 12px; background: rgba(184,134,11,.04); border-radius: 6px; margin-bottom: 8px; position: relative; }
.cg-badge { position: absolute; top: 0; right: 0; background: #c0392b; color: #fff; font-size: 11px; font-weight: 700; padding: 3px 12px; border-radius: 0 0 0 8px; letter-spacing: 2px; }
.im-send:active { transform: scale(.95); }

/* ===== 命理同好（发现 / 匹配 / 标签） ===== */
.im-sub { font-size: 11px; color: var(--text-3); margin-left: 8px; letter-spacing: 1px; }
.im-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 16px; }
.im-scroll::-webkit-scrollbar { width: 0; }
/* 我的标签卡 */
.im-mytags { margin: 12px 14px 4px; background: linear-gradient(135deg, rgba(200,163,90,.08), var(--bg-1)); border: 1px solid rgba(200,163,90,.25); border-radius: 12px; padding: 13px 14px; }
.im-mt-hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.im-mt-hd > span:first-child { font-size: 13px; color: var(--gold-2); font-weight: 600; letter-spacing: 2px; }
.im-mt-tip { font-size: 10px; color: var(--text-3); }
.im-mt-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.im-mt-row label { font-size: 11px; color: var(--text-3); width: 56px; flex: none; }
.im-mt-row b { font-size: 13px; color: var(--text-0); font-weight: 600; }
.im-mt-edit { margin-top: 12px; border-top: 1px dashed rgba(200,163,90,.15); padding-top: 12px; display: flex; flex-direction: column; gap: 11px; }
.im-edit-grp label { display: block; font-size: 11px; color: var(--text-3); margin-bottom: 6px; }
.im-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.im-chip { font-size: 11.5px; padding: 5px 12px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--line); color: var(--text-2); cursor: pointer; user-select: none; transition: all .15s; }
.im-chip.on { background: rgba(200,163,90,.15); border-color: var(--gold-dim); color: var(--gold-2); font-weight: 600; }
.im-chip:active { transform: scale(.94); }
.im-save { margin-top: 4px; padding: 11px; border-radius: 12px; background: linear-gradient(135deg, var(--gold-2), var(--gold-dim)); color: #fff; font-size: 13px; font-weight: 600; border: none; cursor: pointer; letter-spacing: 2px; }
.im-save:active { transform: scale(.97); }
/* 匹配区标题 */
.im-sec-title { font-size: 13px; color: var(--gold-2); letter-spacing: 2px; margin: 18px 14px 10px; font-weight: 600; }
.im-sec-title small { font-size: 10px; color: var(--text-3); letter-spacing: 0; font-weight: 400; }
/* 匹配卡片 */
.im-match-list { padding: 0 14px; display: flex; flex-direction: column; gap: 10px; }
.im-match { background: var(--bg-1); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.im-match-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.im-match-star { font-size: 14px; color: var(--gold-2); font-weight: 600; }
.im-match-score { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 10px; }
.im-match-score.hot { background: rgba(234,179,8,.18); color: #facc15; }
.im-match-score.mid { background: rgba(200,163,90,.14); color: var(--gold-2); }
.im-match-score.low { background: rgba(156,163,175,.14); color: #9ca3af; }
.im-match-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.im-tag { font-size: 10.5px; padding: 2px 8px; border-radius: 4px; background: rgba(255,255,255,.05); color: var(--text-2); }
.im-on { font-size: 10.5px; padding: 2px 8px; border-radius: 4px; background: rgba(74,222,128,.12); color: #4ade80; }
.im-off { font-size: 10.5px; padding: 2px 8px; border-radius: 4px; background: rgba(156,163,175,.1); color: var(--text-3); }
.im-match-trouble { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.im-tg { font-size: 10.5px; padding: 2px 8px; border-radius: 4px; background: rgba(96,165,250,.1); color: #93c5fd; }
.im-chat-btn { width: 100%; padding: 9px; border-radius: 10px; background: rgba(200,163,90,.12); border: 1px solid var(--gold-dim); color: var(--gold-2); font-size: 12.5px; font-weight: 600; cursor: pointer; letter-spacing: 2px; }
.im-chat-btn:active { transform: scale(.97); background: rgba(200,163,90,.2); }
/* 脱敏对方卡 */
.im-peer-card { margin: 10px 14px; background: linear-gradient(135deg, rgba(200,163,90,.07), var(--bg-1)); border: 1px solid rgba(200,163,90,.2); border-radius: 10px; padding: 12px 14px; }
.im-peer-star { font-size: 14px; color: var(--gold-2); font-weight: 600; margin-bottom: 8px; }
.im-peer-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.im-peer-trouble { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.im-peer-note { font-size: 10px; color: var(--text-3); line-height: 1.5; border-top: 1px dashed rgba(200,163,90,.12); padding-top: 7px; }

/* pair / 配对好友 */
.pair-intro { text-align: center; padding: 22px 20px 16px; color: var(--text-2); font-size: 13px; letter-spacing: 1px; line-height: 1.8; }
.pair-bagua-icon { font-size: 32px; margin-bottom: 8px; filter: drop-shadow(0 0 8px rgba(200,163,90,.35)); }
.pair-list { padding: 0 14px; flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.pair-card { display: flex; align-items: center; gap: 12px; padding: 13px 14px; background: var(--bg-1); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px; }
.pair-avatar { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--gold-dim), #3a2a14); display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--gold-2); flex: none; }
.pair-info { flex: 1; min-width: 0; }
.pair-name { font-size: 14px; color: var(--text-0); font-weight: 500; }
.pair-gender { font-size: 11px; color: var(--text-3); margin-left: 6px; padding: 1px 6px; border: 1px solid var(--line); border-radius: 8px; }
.pair-bazi { font-size: 12px; color: var(--gold-2); margin-top: 3px; }
.pair-score { font-size: 12px; color: var(--text-2); margin-top: 4px; }
.pair-pending { font-size: 12px; color: var(--text-3); margin-top: 4px; }
.pair-action { flex: none; }
.paired-tag { font-size: 12px; color: #4ade80; font-weight: 500; }
.pair-btn { padding: 6px 16px; border-radius: 14px; background: linear-gradient(135deg, var(--gold-2), var(--gold-dim)); color: #fff; font-size: 12px; font-weight: 600; border: none; cursor: pointer; letter-spacing: 2px; }
.pair-btn:active { transform: scale(.94); }
.pair-invite { padding: 14px 18px 20px; }
.pair-btn-full { width: 100%; padding: 12px; border-radius: 12px; font-size: 14px; }

/* ========== 细盘（关联交互式大表） ========== */
.xipan-wrap { padding-bottom: 12px; }

/* 主表：日期固定32px，6个数据列等宽 */
.xp-table { margin: 0; background: var(--bg-1); border: none; }
.xp-hd,
.xp-row {
  display: flex;
  width: 100%;
}
/* 默认：四柱列（稍宽） */
.xp-hd > *,
.xp-row > * {
  flex: 1.1;
  min-width: 0;
  text-align: center;
  border-right: 1px solid var(--line);
  overflow: hidden;
}
/* 流年(第2)、大运(第3) — 可点击切换，稍窄 */
.xp-hd > *:nth-child(2),
.xp-hd > *:nth-child(3),
.xp-row > *:nth-child(2),
.xp-row > *:nth-child(3) { flex: 0.8; }
/* 标签列(第1) — 固定窄 */
.xp-hd > *:first-child,
.xp-row > *:first-child { flex: 0 0 24px !important; min-width: 24px; max-width: 24px; }
.xp-hd > *:last-child,
.xp-row > *:last-child { border-right: none; }

.xp-th { padding: 7px 2px; font-size: 10px; color: var(--text-3); background: rgba(200,163,90,.06); border-bottom: 1px solid var(--line); letter-spacing: 1px; font-weight: 600; line-height: 1.4; }
/* 表头标题 — 统一金色加粗（流年/大运可点击） */
.xp-th:nth-child(2),
.xp-th:nth-child(3),
.xp-th:nth-child(4),
.xp-th:nth-child(5),
.xp-th:nth-child(6),
.xp-th:nth-child(7) { color: var(--gold-2); font-weight: 700; }
.xp-th:nth-child(2),
.xp-th:nth-child(3) { cursor: pointer; position: relative; }
.xp-th:nth-child(2):after,
.xp-th:nth-child(3):after { content: '↕'; font-size: 9px; margin-left: 2px; opacity: .5; }
.xp-row { border-bottom: 1px solid var(--line); }
.xp-row:last-child { border-bottom: none; }

/* 岁年行（前两行）缩小 — 不是重点 */
.xp-row:nth-child(2) .xp-cell,
.xp-row:nth-child(3) .xp-cell { min-height: 30px !important; padding: 4px 2px !important; }
.xp-row:nth-child(2) .xp-val,
.xp-row:nth-child(3) .xp-val { font-size: 11px !important; }

.xp-cell { padding: 6px 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-size: 13px; color: var(--text-0); min-height: 48px; line-height: 1.3; overflow: hidden; word-break: keep-all; }
.xp-cell:first-child { color: var(--text-2); font-size: 10px; font-weight: 500; flex: 0 0 24px !important; min-width: 24px; max-width: 24px; }
.xp-val { font-weight: 500; color: var(--gold-2); font-size: 12px; }

/* 五行颜色（用于天干地支着色） */
.w-jin { color: #d9b34d !important; }
.w-mu  { color: #5e9a6e !important; }
.w-shui { color: #5e7fb3 !important; }
.w-huo { color: #c8463c !important; }
.w-tu  { color: #d28a3a !important; }

/* 天干：大字 + 小十神标签竖排（参照参考图） */
.xp-tg { display: flex !important; flex-direction: column !important; align-items: center; justify-content: center; gap: 0px !important; font-size: 20px !important; font-weight: 700; line-height: 1.1; }
.xp-tg, .xp-tg .xp-tg-text { color: inherit; }
.xp-ss { font-size: 11px !important; color: var(--text-3); font-weight: 500; margin-top: 1px; letter-spacing: 0; line-height: 1.2; }

/* 地支：大字在左 + 藏干十神竖排在右（参照参考图） */
.xp-zh { display: flex !important; flex-direction: row !important; align-items: center; justify-content: center; gap: 6px !important; }
.xp-zh, .xp-zh .xp-zh-name { color: inherit; }
.xp-zh-name { font-size: 20px !important; font-weight: 700; line-height: 1.1; }
.xp-cg-wrap { display: flex; flex-direction: column; gap: 0px; align-items: flex-start; justify-content: center; }
.xp-cg { font-size: 11px !important; opacity: .85; line-height: 1.3; }

/* 流月行 — 紧凑横排 */
.xp-ly-row { display: flex; margin: 0; align-items: stretch; border-bottom: 1px solid var(--line); background: var(--bg-1); overflow-x: auto; }
.xp-ly-label { width: 36px; flex-shrink: 0; font-size: 11px; color: var(--text-3); text-align: right; padding-right: 6px; letter-spacing: 1px; border-right: 1px solid var(--line); display: flex; align-items: center; justify-content: flex-end; }
.xp-ly-gz { flex: 1; min-width: 48px; max-width: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4px 2px; border-right: 1px solid rgba(200,163,90,.1); gap: 0; line-height: 1.15; }
.xp-ly-gz:last-child { border-right: none; }
.xp-ly-top { display: flex; align-items: center; gap: 3px; margin-bottom: 1px; }
.xp-ly-jq { font-size: 8px; color: var(--text-3); white-space: nowrap; }
.xp-ly-dt { font-size: 7.5px; color: var(--text-3); opacity: .55; }
/* 干支一行横排：干上支下太占空间，改为 干支并排 */
.xp-ly-gz-inner { display: flex; align-items: center; gap: 2px; font-weight: 700; }
.xp-ly-g { font-size: 13px; }
.xp-ly-z { font-size: 12px; opacity: .82; font-weight: 600; }
.xp-ly-ny { font-size: 7.5px; color: var(--text-3); opacity: .5; margin-top: 1px; }

/* 辅助行（星运/自坐/空亡） */
.xp-aux-row { display: flex; margin: 0; align-items: stretch; border-bottom: 1px solid var(--line); background: var(--bg-1); }
.xp-aux-row:last-child { border-bottom: none; }
.xp-aux-lbl { width: 36px; flex-shrink: 0; font-size: 11px; color: var(--text-3); text-align: right; padding-right: 6px; letter-spacing: 1px; border-right: 1px solid var(--line); display: flex; align-items: center; justify-content: flex-end; }
.xp-aux-cell { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; font-size: 11.5px; color: var(--text-2); padding: 5px 2px; border-right: 1px solid rgba(200,163,90,.1); line-height: 1.3; word-break: keep-all; }
.xp-aux-cell:last-child { border-right: none; }
.xp-aux-cell.xp-active { background: rgba(200,163,90,.12); color: var(--gold-2); font-weight: 600; }

/* 底部选择条 */
.xp-hint { text-align: center; font-size: 11px; color: var(--text-3); padding: 6px 0 4px; }
.xp-bar { margin: 0; }
.xp-bar-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--line); background: var(--bg-1); }
.xp-bar-row:last-child { border-bottom: none; }
.xp-bar-lbl { width: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--text-3); font-weight: 600; border-right: 1px solid var(--line); }
.xp-age-row .xp-age-cell { flex: 1; min-width: 0; text-align: center; font-size: 11px; color: var(--text-2); padding: 5px 2px; line-height: 1.35; border-right: 1px solid var(--line); word-break: keep-all; }
.xp-age-row .xp-age-cell:last-child { border-right: none; }
.xp-age-row .xp-age-cell small { display: block; font-size: 9px; color: var(--text-3); opacity: .7; }

/* 大运单元格 */
.xp-du-row .xp-du-cell { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 2px; cursor: pointer; transition: background .2s; border-right: 1px solid var(--line); }
.xp-du-row .xp-du-cell:last-child { border-right: none; }
.xp-du-cell:hover { background: rgba(255,255,255,.04); }
.xp-du-on { background: rgba(200,163,90,.15) !important; }
.xp-du-gz { font-size: 16px; font-weight: 700; letter-spacing: 1px; }
.xp-du-gz em { display: block; font-size: 9px; font-style: normal; font-weight: 400; color: var(--text-3); opacity: .7; margin-top: 1px; }
.xp-du-xiaoyun { opacity: .75; }

/* 流年单元格 */
.xp-ln-row { display: flex; }
.xp-ln-cell { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 2px; cursor: pointer; transition: background .2s; border-right: 1px solid var(--line); }
.xp-ln-cell:last-child { border-right: none; }
.xp-ln-cell:hover { background: rgba(255,255,255,.04); }
.xp-ln-on { background: rgba(200,163,90,.15) !important; }
.xp-ln-gz { font-size: 14px; font-weight: 700; letter-spacing: 1px; }
.xp-ln-y { font-size: 10px; color: var(--text-3); margin-top: 1px; }

/* ---- 细盘 v2：主星行 / 藏干多行 / 神煞 / 纳音 / 起运 / 五行旺衰 ---- */

/* 主星(十神)行 */
.xp-row-ss .xp-cell { min-height: 28px !important; padding: 3px 2px !important; }
.xp-cell-ss { font-size: 11px !important; color: var(--gold-2); font-weight: 600; }
.xp-ss-txt { display: inline-block; }

/* 天干大字 */
.xp-row-tg .xp-cell { min-height: 38px !important; }
.xp-cell-tg { font-size: 22px !important; font-weight: 700; letter-spacing: 2px; }
.xp-tg-ch { display: inline-block; }

/* 地支大字 */
.xp-row-zh .xp-cell { min-height: 38px !important; }
.xp-cell-zh { font-size: 22px !important; font-weight: 700; letter-spacing: 2px; }
.xp-zh-ch { display: inline-block; }

/* 藏干行（紧凑横排） */
.xp-row-cg .xp-cell { min-height: 28px !important; padding: 2px 3px !important; flex-wrap: wrap !important; gap: 1px 4px !important; justify-content: center; align-content: center; }
.xp-cell-cg { font-size: 10px !important; display: flex; flex-wrap: wrap; gap: 1px 4px; justify-content: center; align-content: center; line-height: 1.5; }
.xp-cg-item { display: inline-flex; align-items: baseline; gap: 0; font-size: 10px; font-weight: 600; white-space: nowrap; }
.xp-cg-item em { font-style: normal; font-size: 8px; color: var(--text-3); opacity: .7; margin-left: 1px; }

/* 神煞行（与藏干同款排版） */
.xp-row-sha .xp-cell { min-height: 28px !important; padding: 2px 3px !important; flex-wrap: wrap !important; gap: 1px 4px !important; justify-content: center; align-content: center; }
.xp-cell-sha { font-size: 10px !important; display: flex; flex-wrap: wrap; gap: 1px 4px; justify-content: center; align-content: center; line-height: 1.5; }
.xp-sha-inner { display: contents; }
.xp-sha-pill { display: inline-flex; color: var(--gold-2); font-size: 10px; font-weight: 600; white-space: nowrap; }

/* 纳音行 */
.xp-row-ny .xp-cell { min-height: 24px !important; font-size: 9.5px !important; color: var(--text-3); }
.xp-cell-ny { font-size: 9.5px; opacity: .75; }

/* 星运行 */
.xp-row-xy .xp-cell { min-height: 24px !important; font-size: 10.5px !important; color: var(--text-2); }
.xp-cell-xy { font-size: 10.5px; letter-spacing: 1px; }

/* 自坐行 */
.xp-row-zz .xp-cell { min-height: 24px !important; font-size: 10.5px !important; color: var(--text-2); }
.xp-cell-zz { font-size: 10.5px; }

/* 标签列统一样式 */
.xp-lbl { color: var(--text-3) !important; font-size: 10px !important; font-weight: 500 !important; writing-mode: horizontal-tb; }
.xp-th-click { cursor: pointer; position: relative; }

/* 起运/交运 */
.xp-qy { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; background: rgba(255,255,255,.02); border-bottom: 1px solid var(--line); }
.xp-qy-row { display: flex; align-items: center; gap: 6px; font-size: 11px; line-height: 1.5; }
.xp-qy-l { color: var(--text-3); font-weight: 500; white-space: nowrap; }
.xp-qy-v { color: var(--text-1); flex: 1; }
.xp-qy-age { color: var(--gold-2); font-weight: 600; white-space: nowrap; }
/* removed xp-qy-kong */

/* 五行旺衰条 */
.xp-wxbar { display: flex; padding: 6px 8px; background: rgba(255,255,255,.02); border-top: 1px solid var(--line); gap: 2px; }
.xp-wx-item { flex: 1; text-align: center; font-size: 10px; font-weight: 600; padding: 4px 2px; border-radius: 3px; letter-spacing: 1px; }
.xp-wx-wang { background: rgba(220,160,60,.25); color: #d4a84b; }
.xp-wx-xiang { background: rgba(180,140,80,.18); color: #b89850; }
.xp-wx-qiu { background: rgba(120,100,80,.12); color: #8a7860; }
.xp-wx-si { background: rgba(80,70,60,.1); color: #685850; }
.xp-wx-ping { background: rgba(100,90,80,.14); color: #7a6e5c; }

/* ====== 神煞总览区域（四柱+大运+流年）====== */
.shensha-wrap { padding: 0 4px; }
.ss-section { margin-bottom: 8px; }
.ss-row { display: flex; align-items: baseline; gap: 8px; padding: 5px 8px; font-size: 11px; line-height: 1.5; }
.ss-tag { background: rgba(200,163,90,.12); color: var(--gold-2); font-weight: 600; font-size: 10.5px; padding: 2px 8px; border-radius: 3px; white-space: nowrap; }
.ss-val { color: var(--text-2); flex: 1; word-break: break-all; }
/* 卡片式 */
.ss-card { background: rgba(255,255,255,.02); border: 1px solid rgba(200,163,90,.12); border-radius: 6px; padding: 8px 10px; }
.ss-head { font-size: 12.5px; font-weight: 700; color: var(--gold-2); margin-bottom: 6px; letter-spacing: 1px; display: flex; align-items: center; gap: 6px; }
.ss-count { font-size: 9.5px; font-weight: 500; color: var(--text-3); background: rgba(200,163,90,.1); padding: 1px 6px; border-radius: 8px; }
.ss-pillar-row { display: flex; align-items: flex-start; gap: 4px; padding: 3px 0; line-height: 1.65; font-size: 11px; }
.ss-pillar-row.ss-cur { background: rgba(200,163,90,.1); border-radius: 4px; margin: 0 -6px; padding: 3px 6px; }
.ss-pillar-row.ss-cur .ss-pn { color: var(--gold-2); }
.ss-pn { color: var(--text-1); font-weight: 600; min-width: 48px; flex-shrink: 0; letter-spacing: 0.5px; }
.ss-items { flex: 1; display: flex; flex-wrap: wrap; gap: 3px 6px; }
.ss-item { display: inline-block; background: rgba(200,163,90,.08); color: var(--gold-2); padding: 0 5px; border-radius: 3px; font-size: 10px; line-height: 1.7; white-space: nowrap; }
.ss-empty { color: var(--text-3); opacity: .5; font-size: 10px; }

/* ==================== 紫微斗数十二宫格（4×4 Grid） ==================== */
.zw-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-auto-rows: minmax(90px, auto); gap: 2px; padding: 3px; background: var(--bg-1); border-radius: 8px; }
.zw-gr { display: contents; }

/* 宫格 */
.zw-p { background: rgba(255,255,255,.025); border: 1px solid rgba(200,163,90,.18); border-radius: 5px; padding: 3px 4px; display: flex; flex-direction: column; gap: 1px; min-height: 72px; }

/* 头部：宫名 + 地支 + 四化 */
.zw-ph { display: flex; align-items: center; justify-content: space-between; padding-bottom: 2px; border-bottom: 1px solid rgba(200,163,90,.12); line-height: 1.2; }
.zw-pn { font-size: 10.5px; font-weight: 700; color: #a855f7; letter-spacing: 1px; flex-shrink: 0; }
.zw-pz { font-size: 11.5px; font-weight: 700; color: var(--gold-2); background: rgba(200,163,90,.15); padding: 0 4px; border-radius: 3px; flex-shrink: 0; }
.zw-ph-sh { display: flex; gap: 1px; flex-shrink: 0; }

/* 主体区 */
.zw-pb { flex: 1; display: flex; flex-direction: column; gap: 1px; padding: 1px 0; min-height: 0; }

/* 主星行 */
.zw-row-maj { display: flex; flex-wrap: wrap; gap: 3px 6px; line-height: 1.25; }
.zw-maj { font-size: 13.5px; font-weight: 700; letter-spacing: 1px; white-space: nowrap; }

/* 辅星行 */
.zw-row-aux { display: flex; flex-wrap: wrap; gap: 1px 4px; line-height: 1.2; }
.zw-a { font-size: 10px; font-weight: 600; white-space: nowrap; opacity: .88; }

/* 煞星行 */
.zw-row-sha { display: flex; flex-wrap: wrap; gap: 1px 4px; line-height: 1.2; }
.zw-s { font-size: 10px; font-weight: 600; white-space: nowrap; }

/* 杂耀行（小字多列） */
.zw-row-misc { display: flex; flex-wrap: wrap; gap: 0 3px; line-height: 1.25; }
.zw-ms { font-size: 9.5px; font-weight: 500; white-space: nowrap; opacity: .82; }

/* 大限 */
.zw-dx { font-size: 8.5px; color: var(--text-3); text-align: center; padding-top: 1px; border-top: 1px solid rgba(200,163,90,.08); margin-top: auto; }

/* 四化标签 */
.zw-sh { display: inline-block; font-size: 8.5px; font-weight: 700; padding: 0 2px; border-radius: 2px; line-height: 1.35; vertical-align: middle; }
.zw-sh-lu { background: rgba(245,158,11,.22); color: #f59e0b; }
.zw-sh-quan { background: rgba(239,68,68,.22); color: #ef4444; }
.zw-sh-ke { background: rgba(59,130,246,.22); color: #3b82f6; }
.zw-sh-ji { background: rgba(168,85,247,.22); color: #a855f7; }

/* 中央信息区（跨2列×2行） */
.zw-cc { grid-column: span 2; grid-row: span 2; background: linear-gradient(135deg, rgba(168,85,247,.06), rgba(200,163,90,.04)); border: 1px solid rgba(168,85,247,.16); border-radius: 5px; padding: 8px 10px; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.zw-c { width: 100%; }
.zw-ct { font-size: 12.5px; font-weight: 700; color: #a855f7; text-align: center; letter-spacing: 2px; }
.zw-cr { font-size: 10.5px; color: var(--text-2); line-height: 1.5; }
.zw-cr b, .zw-cr strong { color: var(--gold-2); }
.zw-crs { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }

.zw-error { color: #ef4444; padding: 20px; text-align: center; font-size: 13px; }

/* ==================== 潮汕圣杯（杯筊） ==================== */
.sb-card { margin: 12px 14px 18px; background: linear-gradient(160deg, #fffdf6, #fbf3e0); border: 1px solid var(--gold-dim); border-radius: 12px; padding: 14px 14px 12px; box-shadow: 0 4px 14px rgba(180,140,70,.12); }
.sb-head { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin-bottom: 10px; }
.sb-title { font-size: 15px; font-weight: 700; color: var(--gold-2); letter-spacing: 3px; }
.sb-sub { font-size: 10.5px; color: var(--text-3); letter-spacing: 1px; }
.sb-stage { display: flex; align-items: flex-end; justify-content: center; gap: 26px; padding: 6px 0 4px; min-height: 78px; }
.sb-cup { width: 64px; filter: drop-shadow(0 4px 6px rgba(120,80,30,.18)); }
.sb-cup .sb-svg { width: 100%; height: auto; display: block; }
.sb-stage.sb-shaking .sb-cup { animation: sbShake .26s linear infinite; }
.sb-stage.sb-shaking .sb-cup-b { animation-delay: .13s; }
@keyframes sbShake { 0% { transform: translateY(0) rotate(-9deg); } 50% { transform: translateY(-7px) rotate(9deg); } 100% { transform: translateY(0) rotate(-9deg); } }
.sb-stage.sb-settled .sb-cup { animation: sbSettle .4s ease; }
@keyframes sbSettle { 0% { transform: translateY(-12px) scale(1.04); } 60% { transform: translateY(3px); } 100% { transform: translateY(0); } }
.sb-result { text-align: center; min-height: 44px; margin: 6px 0 10px; }
.sb-hint { font-size: 12px; color: var(--text-3); letter-spacing: 1px; padding-top: 12px; }
.sb-verdict { font-size: 20px; font-weight: 800; letter-spacing: 4px; line-height: 1.2; }
.sb-verdict.sb-sheng { color: #2e8b57; }
.sb-verdict.sb-xiao { color: var(--gold-2); }
.sb-verdict.sb-yin { color: #c0392b; }
.sb-desc { font-size: 11.5px; color: var(--text-1); line-height: 1.6; margin-top: 5px; padding: 0 6px; }
.sb-throw { display: block; width: 100%; height: 46px; border: none; border-radius: 10px; background: linear-gradient(135deg, var(--gold-2), var(--gold-dim)); color: #fff; font-size: 16px; font-weight: 700; letter-spacing: 6px; cursor: pointer; box-shadow: 0 6px 16px rgba(200,163,90,.3); user-select: none; }
.sb-throw:active { transform: scale(.98); }
.sb-foot { font-size: 9.5px; color: var(--text-3); text-align: center; margin-top: 9px; letter-spacing: .5px; }