/* ============================================================
   命盘自己的变量：能取总表（--ws-*）的都取总表，这里只起别名。
   总表里没有的才写新值：一个「紫」和尺寸。前缀 --mp-（命盘）。
   ============================================================ */
:root{
  --mp-ink: var(--ws-ink);
  --mp-muted: var(--ws-ink-gray-2);
  --mp-faint: var(--ws-ink-gray-3);
  --mp-line: var(--ws-line);
  --mp-paper: var(--ws-paper);
  --mp-card: var(--ws-card);
  --mp-band: var(--ws-paper-band);
  --mp-r: var(--ws-radius-0);
  --mp-r-card: var(--ws-radius-card);
  --serif: var(--ws-font-song-first);

  --wx-mu: var(--ws-wood-dark);
  --wx-huo: var(--ws-red);
  --wx-tu: var(--ws-earth-dark);
  --wx-jin: var(--ws-gold-deep);
  --wx-shui: var(--ws-ink);

  --hua-lu: var(--ws-wood-dark);
  --hua-quan: var(--mp-zi);
  --hua-ke: var(--ws-cal-term);
  --hua-ji: var(--ws-red);

  /* ===== 总表里没有、命盘自己加的 ===== */
  --mp-zi: #5B4B7A;        /* 紫：命宫、选中、当前的运 */
  --mp-zi-air: #ECE8F0;    /* 紫的极浅底 */
  --cell-min: 118px;
  --tabbar-h: 62px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
@media (max-width: 760px){ :root{ --cell-min: 96px; } }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit; color:inherit}
button{background:none; border:0; padding:0; cursor:pointer}
[hidden]{display:none !important}
.wx-木{color:var(--wx-mu)} .wx-火{color:var(--wx-huo)} .wx-土{color:var(--wx-tu)} .wx-金{color:var(--wx-jin)} .wx-水{color:var(--wx-shui)}


/* ---------- 页首（排盘页） ---------- */
.motto .gr{font-family:var(--ws-font-en); font-style:italic; color:var(--mp-ink); margin-right:.5em}

/* ---------- 卡片、行 ---------- */
.home{max-width:560px; margin:0 auto}
.card{background:var(--mp-card); border:1px solid var(--mp-line); border-radius:var(--mp-r-card); padding:4px 18px 18px}
.card + .card{margin-top:16px}
.frow{display:flex; align-items:center; gap:12px; min-height:58px; border-bottom:1px solid var(--mp-line); width:100%; text-align:left}
.frow .lb{flex:none; font-size:17px; letter-spacing:.06em}
.frow .lb small{font-size:12px; color:var(--mp-faint); margin-left:2px; letter-spacing:0}
.frow .val{flex:1; min-width:0; text-align:right; font-size:16px; color:var(--mp-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.frow .val.ph{color:var(--mp-faint)}
.frow .chev{flex:none; width:8px; height:8px; border-right:1.5px solid var(--mp-faint); border-top:1.5px solid var(--mp-faint); transform:rotate(45deg); margin:0 4px 0 2px}
.frow input{flex:1; min-width:0; border:0; background:none; text-align:right; font-size:16px; padding:8px 0}
.frow input::placeholder{color:var(--mp-faint)}
.frow input:focus{outline:none}
.frow.pair{justify-content:space-between}
@media (hover:hover){ button.frow:hover .val{color:var(--mp-zi)} }

.seg{display:inline-flex; border:1px solid var(--mp-line); background:var(--mp-paper); padding:2px; border-radius:999px}
.seg button{min-width:3.4em; padding:5px 14px; border-radius:999px; font-size:15px; letter-spacing:.12em; color:var(--mp-muted)}
.seg button[aria-pressed="true"]{background:var(--mp-ink); color:var(--mp-paper)}

.preview{display:flex; align-items:center; gap:12px; padding:14px 0 4px; font-size:13px; color:var(--mp-faint); line-height:1.65}
.preview > div{flex:1; min-width:0}
.switch{display:inline-flex; align-items:center; gap:8px; font-size:15px; color:var(--mp-muted); cursor:pointer; flex:none}
.switch input{appearance:none; -webkit-appearance:none; width:46px; height:28px; border-radius:999px; background:var(--mp-line); position:relative; margin:0; cursor:pointer; transition:background .2s}
.switch input::after{content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:var(--ws-white); box-shadow:0 1px 3px rgba(0,0,0,.2); transition:transform .2s}
.switch input:checked{background:var(--mp-ink)}
.switch input:checked::after{transform:translateX(18px)}

.btn.block{display:flex; width:100%; margin-top:18px; min-height:54px; font-size:18px}
.btn.small{min-height:36px; padding:6px 14px; font-size:14.5px; letter-spacing:.1em; text-indent:.1em}
.err{margin:10px 0 0; text-align:center; font-size:14px; color:var(--ws-red)}

/* 此刻 */
.nowcard{display:flex; align-items:center; gap:16px; padding:16px 18px}
.nowcard .gz{display:grid; grid-template-columns:repeat(4, 1.6em); font-size:23px; line-height:1.3; font-weight:700}
.nowcard .meta{font-size:12.5px; color:var(--mp-faint); line-height:1.6; margin-top:4px}
.nowcard .right{margin-left:auto; text-align:center}
.nowcard .clock{font-size:22px; letter-spacing:.04em; margin-bottom:6px}

/* ---------- 底部导航 ---------- */
.tabbar{position:fixed; left:0; right:0; bottom:0; z-index:20; display:flex; justify-content:center; height:calc(var(--tabbar-h) + var(--safe-b)); padding-bottom:var(--safe-b);
  background:color-mix(in srgb, var(--mp-paper) 92%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-top:1px solid var(--mp-line)}
.tabbar button{flex:0 1 160px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-size:12.5px; color:var(--mp-faint); letter-spacing:.1em}
.tabbar svg{width:24px; height:24px}
.tabbar button[aria-current="page"]{color:var(--mp-ink)}
body.on-chart .tabbar{display:none}

/* ---------- 记录 ---------- */
.vh{display:flex; align-items:baseline; gap:12px; margin:4px 2px 14px}
.vh h1{margin:0; font-size:24px; font-weight:900; letter-spacing:.14em}
.vh .sub{font-size:13.5px; color:var(--mp-faint)}
.vh .act{margin-left:auto; display:flex; gap:14px; font-size:14.5px; color:var(--mp-muted)}
.vh .act button{letter-spacing:.08em}
@media (hover:hover){ .vh .act button:hover{color:var(--mp-ink)} }
.search{width:100%; min-height:44px; border:1px solid var(--mp-line); border-radius:var(--mp-r-card); background:var(--mp-card); padding:8px 14px; font-size:16px}
.search:focus{outline:none; border-color:var(--mp-ink)}
.chips{display:flex; gap:8px; overflow-x:auto; padding:12px 0 4px; scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips button{flex:none; padding:4px 14px; border:1px solid var(--mp-line); border-radius:999px; font-size:14px; color:var(--mp-muted); background:var(--mp-card)}
.chips button[aria-pressed="true"]{background:var(--mp-ink); border-color:var(--mp-ink); color:var(--mp-paper)}
.rlist{list-style:none; margin:10px 0 0; padding:0; display:grid; gap:10px}
.rec{display:flex; gap:14px; align-items:center; background:var(--mp-card); border:1px solid var(--mp-line); border-radius:var(--mp-r-card); padding:12px 14px}
.rec .main{flex:1; min-width:0; cursor:pointer}
.rec .nm{font-size:18px; font-weight:700; letter-spacing:.06em}
.rec .nm small{font-size:13px; font-weight:400; color:var(--mp-faint); margin-left:.6em; letter-spacing:0}
.rec .tag{display:inline-block; margin-left:6px; padding:0 6px; font-size:11.5px; border:1px solid var(--mp-line); color:var(--mp-muted); vertical-align:2px; letter-spacing:.04em}
.rec .ln{font-size:13.5px; color:var(--mp-muted); line-height:1.6}
.rec .bz{font-size:15px; letter-spacing:.12em; margin-top:2px}
.rec .ops{display:flex; flex-direction:column; gap:6px; align-items:flex-end; font-size:13.5px; color:var(--mp-faint)}
.rec .ops button{padding:2px 0; letter-spacing:.08em}
.rec .ops .del.armed{color:var(--ws-red)}
.empty{padding:40px 10px; text-align:center; color:var(--mp-faint); font-size:15px}

/* ---------- 设置 ---------- */
.set h2{margin:0 0 4px; font-size:17px; letter-spacing:.12em}
.set .d{margin:0 0 10px; font-size:13.5px; color:var(--mp-muted)}
.set .opt{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px}
.set .opt label{display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border:1px solid var(--mp-line); border-radius:var(--mp-r-card); background:var(--mp-paper); cursor:pointer; font-size:15px}
.set .opt input{accent-color:var(--mp-ink); margin:0}
.set .opt label:has(input:checked){border-color:var(--mp-ink)}
.set section{padding:16px 0; border-bottom:1px solid var(--mp-line)}
.set section:last-child{border-bottom:0}
.set .row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.about{font-size:13.5px; color:var(--mp-muted)}

/* ---------- 底部弹层 ---------- */
.sheet{position:fixed; inset:0; z-index:40}
.sheet-bg{position:absolute; inset:0; background:rgba(20,18,24,.42); animation:fade .2s}
.sheet-panel{position:absolute; left:0; right:0; bottom:0; max-height:92dvh; display:flex; flex-direction:column; background:var(--mp-card);
  border-radius:16px 16px 0 0; padding:16px 16px calc(16px + var(--safe-b)); animation:up .25s cubic-bezier(.2,.8,.2,1); max-width:640px; margin:0 auto}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet-top{display:flex; align-items:center; gap:10px; margin-bottom:12px}
.sheet-top .seg{background:var(--mp-band)}
.sheet-top .sp{flex:1}
.sheet-top .t{font-size:18px; font-weight:700; letter-spacing:.12em}
.round{width:40px; height:40px; border-radius:50%; background:var(--mp-band); font-size:16px; flex:none}
.quick{display:flex; gap:8px; background:var(--mp-band); border-radius:999px; padding:4px 4px 4px 16px; margin-bottom:6px}
.quick input{flex:1; min-width:0; border:0; background:none; font-size:15px; padding:6px 0}
.quick input:focus{outline:none}
.quick button{padding:6px 16px; border-radius:999px; background:var(--mp-card); font-size:15px; color:var(--mp-muted)}

.wheels-head{display:grid; grid-template-columns:1.15fr 1.1fr 1fr 1.2fr .9fr; text-align:center; font-size:15px; color:var(--mp-muted); padding:10px 0 4px}
.wheels{position:relative; display:grid; grid-template-columns:repeat(5, 1fr); height:220px}
.wheels.four{grid-template-columns:1.15fr 1.1fr 1fr 1.2fr .9fr}
.wheel{height:220px; overflow-y:auto; scroll-snap-type:y mandatory; scrollbar-width:none; overscroll-behavior:contain;
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 32%, #000 68%, transparent); mask-image:linear-gradient(to bottom, transparent, #000 32%, #000 68%, transparent)}
.wheel::-webkit-scrollbar{display:none}
.wheel .pad{height:88px}
.wheel .it{height:44px; display:flex; align-items:center; justify-content:center; scroll-snap-align:center; font-size:19px; color:var(--mp-faint); cursor:pointer; font-variant-numeric:tabular-nums; white-space:nowrap}
.wheel .it.on{color:var(--mp-ink); font-weight:700; font-size:21px}
.wheel.off{opacity:.25; pointer-events:none}
.wheels .hl{position:absolute; left:0; right:0; top:88px; height:44px; background:var(--mp-band); border-radius:10px; z-index:-1}
.wheels{z-index:0; isolation:isolate}
.dt-preview{margin:12px 0 0; text-align:center; font-size:14px; color:var(--mp-muted); min-height:1.6em}

.plist{overflow-y:auto; margin:8px -4px 0; padding:0 4px; flex:1; min-height:200px}
.plist h4{margin:14px 0 6px; font-size:13px; color:var(--mp-faint); letter-spacing:.12em; font-weight:400}
.plist .grid{display:flex; flex-wrap:wrap; gap:8px}
.plist .grid button{padding:7px 14px; border:1px solid var(--mp-line); border-radius:var(--mp-r-card); background:var(--mp-paper); font-size:15px}
.plist .grid button.on{border-color:var(--mp-ink); background:var(--mp-ink); color:var(--mp-paper)}
.custom{display:flex; gap:8px; flex-wrap:wrap; margin-top:6px}
.custom input{flex:1 1 8em; min-height:42px; border:1px solid var(--mp-line); border-radius:var(--mp-r-card); background:var(--mp-paper); padding:6px 12px; font-size:15px}

/* ---------- 排盘结果页 ---------- */
.cbar{position:sticky; top:0; z-index:15; display:flex; align-items:center; gap:10px; margin:-6px -4px 8px; padding:8px 4px; background:var(--mp-paper); border-bottom:1px solid var(--mp-line)}
.cbar .back{display:flex; align-items:center; gap:4px; font-size:15px; color:var(--mp-muted); padding:6px 4px}
.cbar .back i{width:10px; height:10px; border-left:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); margin-right:2px}
.cbar .nm{flex:1; min-width:0; font-size:19px; font-weight:900; letter-spacing:.1em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cbar .nm small{font-size:13px; font-weight:400; color:var(--mp-faint); letter-spacing:.02em; margin-left:.5em}
.cbar .acts{display:flex; gap:14px; font-size:14.5px; color:var(--mp-muted)}
.cbar .acts button{letter-spacing:.08em; padding:6px 0}
.cbar .acts .saved{color:var(--mp-zi)}
.who{font-size:14px; color:var(--mp-muted); margin:0 2px 4px}
.notes{margin:0 2px 14px; font-size:13px; color:var(--mp-faint); line-height:1.7}
.notes summary{cursor:pointer; list-style:none; color:var(--mp-muted)}
.notes summary::-webkit-details-marker{display:none}
.notes summary::after{content:" ＋"} .notes[open] summary::after{content:" －"}
.notes p{margin:4px 0}
.notes b{font-weight:400; color:var(--mp-muted)}

.tabs{display:none}
.board{display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); gap:clamp(22px,3vw,40px); align-items:start}
.panel{min-width:0}
.panel-h{display:flex; align-items:baseline; flex-wrap:wrap; gap:2px 12px; margin:0 0 12px}
.panel-h h2{margin:0; font-size:20px; font-weight:900; letter-spacing:.16em; white-space:nowrap}
.panel-h span{font-size:13px; color:var(--mp-faint)}
@media (max-width: 1120px){ .board{grid-template-columns:1fr} }
.sub-h{margin:24px 0 10px; font-size:16px; font-weight:900; letter-spacing:.14em}
.sub-h small{font-size:12.5px; font-weight:400; color:var(--mp-faint); letter-spacing:.04em; margin-left:.6em}

/* 运限：大运 / 流年 / 流月 / 流日 / 流时 */
.yun{margin:0 0 20px; border-top:1px solid var(--mp-ink); border-bottom:1px solid var(--mp-line)}
.yrow{display:grid; grid-template-columns:2.6em minmax(0,1fr); border-bottom:1px solid var(--mp-line)}
.yrow:last-of-type{border-bottom:0}
.yrow .yl{display:flex; align-items:center; justify-content:center; font-size:12.5px; color:var(--mp-faint); writing-mode:vertical-rl; letter-spacing:.2em; background:var(--mp-band)}
.strip{display:flex; overflow-x:auto; scrollbar-width:none; scroll-behavior:smooth}
.strip::-webkit-scrollbar{display:none}
.ycell{flex:0 0 auto; min-width:3.6em; padding:6px 6px 5px; text-align:center; line-height:1.3; border-right:1px solid var(--mp-line); cursor:pointer}
.ycell .ss{display:block; font-size:11px; color:var(--mp-faint)}
.ycell .gz{display:block; font-size:18px; font-weight:900; letter-spacing:.02em}
.ycell .lb{display:block; font-size:11px; color:var(--mp-muted); white-space:nowrap}
.ycell.now .lb{color:var(--mp-zi)}
.ycell.on{background:var(--mp-zi-air); box-shadow:inset 0 -2px 0 var(--mp-zi)}
@media (hover:hover){ .ycell:not(.on):hover{background:var(--mp-card)} }
.ybar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 2px 2px; font-size:13px; color:var(--mp-muted)}
.ybar b{font-weight:400; color:var(--mp-ink)}
.ybar button{margin-left:auto; font-size:13px; color:var(--mp-zi); letter-spacing:.06em}

/* 四柱表（左边可以多几列运） */
.pillars{display:grid; border-top:1px solid var(--mp-ink); border-bottom:1px solid var(--mp-ink)}
.pillars > div{padding:6px 2px; text-align:center; border-top:1px solid var(--mp-line); min-width:0}
.pillars > .rh{text-align:left; font-size:12px; color:var(--mp-faint); letter-spacing:.06em; padding-left:0; display:flex; align-items:center}
.pillars > .top{border-top:0; font-size:13.5px; color:var(--mp-muted); letter-spacing:.08em}
.pillars .yc{background:color-mix(in srgb, var(--mp-zi-air) 55%, transparent)}
.pillars .yc.top{color:var(--mp-zi)}
.pillars .day{background:var(--mp-card)}
.pillars .ss{font-size:13px; color:var(--mp-muted)}
.pillars .ss.me{color:var(--mp-ink); font-weight:700}
.pillars .big{font-size:clamp(26px,3vw,36px); font-weight:900; line-height:1.2; padding:3px 2px}
.pillars .yc.big{font-size:clamp(22px,2.4vw,28px)}
.pillars .hide{font-size:12.5px; line-height:1.5}
.pillars .hide span{display:block; white-space:nowrap}
.pillars .hide em{font-style:normal; color:var(--mp-faint); margin-left:.2em}
.pillars .sm{font-size:13px}
.pillars .na{color:var(--mp-faint)}
.pillars .kong{font-size:10.5px; color:var(--mp-faint); display:block; line-height:1}
.pillars .sha{display:flex; flex-direction:column; gap:1px; align-items:center; font-size:12px; line-height:1.45; padding:6px 1px}
.pillars .sha button{color:var(--mp-muted); white-space:nowrap}
.pillars .sha button.good{color:var(--mp-ink)}
@media (hover:hover){ .pillars .sha button:hover{color:var(--mp-zi)} }
.sha-info{margin:10px 0 0; padding:10px 14px; background:var(--mp-card); border-left:3px solid var(--mp-zi); font-size:14px}
.sha-info b{letter-spacing:.06em}

/* 强弱、喜忌 */
.st{margin-top:20px; padding:16px 18px; background:var(--mp-card); border:1px solid var(--mp-line); border-radius:var(--mp-r-card)}
.st-head{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.st-level{font-size:24px; font-weight:900; letter-spacing:.14em}
.st-head .k{font-size:13px; color:var(--mp-faint)}
.st-pct{font-size:14px; color:var(--mp-muted); margin-left:auto}
.st-bar{position:relative; height:10px; margin:14px 0 4px; background:linear-gradient(90deg, var(--ws-water-air), var(--mp-band) 50%, var(--ws-fire-air))}
.st-bar .mk{position:absolute; top:-5px; width:3px; height:20px; background:var(--mp-ink); transform:translateX(-50%)}
.st-bar .tk{position:absolute; top:0; bottom:0; border-left:1px dashed rgba(0,0,0,.25)}
.st-scale{display:flex; justify-content:space-between; font-size:11.5px; color:var(--mp-faint)}
.st-chips{display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 0}
.st-chips span{padding:2px 10px; border:1px solid var(--mp-line); font-size:13px; color:var(--mp-muted); background:var(--mp-paper)}
.st-chips span.ok{border-color:var(--mp-ink); color:var(--mp-ink)}
.st p{margin:10px 0 0; font-size:14px; color:var(--mp-muted)}
.wx-bars{display:grid; grid-template-columns:repeat(5, 1fr); gap:10px; margin:16px 0 0; align-items:end}
.wx-bar{text-align:center; font-size:13px}
.wx-bar .col{height:58px; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; border-bottom:1px solid var(--mp-line)}
.wx-bar .fill{width:min(30px, 70%); background:currentColor; opacity:.85}
.wx-bar .n{display:block; margin-top:3px; color:var(--mp-ink); line-height:1.4}
.wx-bar .n small{display:block; font-size:11px; color:var(--mp-faint)}
.ys{display:grid; grid-template-columns:repeat(5, 1fr); gap:6px; margin:14px 0 0}
.ys > div{padding:8px 4px; text-align:center; border:1px solid var(--mp-line); background:var(--mp-paper); line-height:1.35}
.ys .k{display:block; font-size:12px; color:var(--mp-faint); letter-spacing:.1em}
.ys b{display:block; font-size:22px; font-weight:900}
.ys small{display:block; font-size:12px; color:var(--mp-muted)}
.ys .good{border-color:var(--mp-ink)}
.ys .bad b{opacity:.75}
.th{margin-top:14px; padding-top:12px; border-top:1px dashed var(--mp-line); font-size:14.5px}
.th .gl{font-size:21px; font-weight:900; letter-spacing:.1em; margin-right:6px}
.th .gl sup{font-size:10px; font-weight:400; color:var(--mp-faint); margin-left:1px; vertical-align:8px}
.disclaim{font-size:12.5px !important; color:var(--mp-faint) !important}

.qiyun{margin:8px 0 0; font-size:13px; color:var(--mp-muted)}

/* ---------- 紫微 ---------- */
.zw-wrap{position:relative; background:var(--mp-card)}
.zw{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); grid-template-rows:repeat(4, minmax(var(--cell-min), auto)); border-top:1px solid var(--mp-ink); border-left:1px solid var(--mp-ink)}
.gong{position:relative; z-index:1; display:flex; flex-direction:column; min-width:0; padding:6px 6px 5px; border-right:1px solid var(--mp-ink); border-bottom:1px solid var(--mp-ink); background:var(--mp-paper); cursor:pointer; transition:background .2s}
@media (hover:hover){.gong:hover{background:var(--mp-card)}}
.gong.trio{background:var(--mp-card)}
.gong.sel{background:var(--mp-zi-air)}
.gong.ming .gn{background:var(--mp-zi); color:var(--ws-white)}
.gong.ym{box-shadow:inset 0 0 0 2px var(--mp-zi)}
.gong .stars{flex:1; display:flex; flex-wrap:wrap; align-content:flex-start; gap:0 6px; line-height:1.45}
.gong .ma{font-size:16px; font-weight:900; white-space:nowrap}
.gong .ma em, .gong .mi em{font-style:normal; font-weight:400; font-size:10.5px; color:var(--mp-faint); margin-left:1px}
.gong .mi{font-size:13px; white-space:nowrap}
.gong .mi.tough{color:var(--mp-muted)}
.hua{display:inline-block; min-width:1.35em; margin-left:2px; padding:0 2px; font-size:11px; font-weight:700; line-height:1.45; text-align:center; color:var(--ws-white); vertical-align:1px}
.hua.禄{background:var(--hua-lu)} .hua.权{background:var(--hua-quan)} .hua.科{background:var(--hua-ke)} .hua.忌{background:var(--hua-ji)}
.hua.lv{background:none !important; font-weight:400; padding:0 1px; border:1px solid currentColor; line-height:1.3}
.hua.lv.禄{color:var(--hua-lu)} .hua.lv.权{color:var(--hua-quan)} .hua.lv.科{color:var(--hua-ke)} .hua.lv.忌{color:var(--hua-ji)}
.gong .adj{margin-top:3px; font-size:11px; color:var(--mp-faint); line-height:1.4}
.gong .yt{display:flex; gap:3px; flex-wrap:wrap; margin-top:3px}
.gong .yt span{font-size:11px; line-height:1.35; padding:0 3px; color:var(--mp-zi); border:1px solid color-mix(in srgb, var(--mp-zi) 45%, transparent)}
.gong .yt span.d{color:var(--mp-muted); border-color:var(--mp-line)}
.gong .ft{display:flex; align-items:flex-end; justify-content:space-between; gap:4px; margin-top:4px; font-size:12px; line-height:1.3}
.gong .ft .l{color:var(--mp-faint)}
.gong .ft .l span{display:block}
.gong .ft .r{text-align:right; white-space:nowrap}
.gong .gn{display:inline-block; padding:1px 4px; font-size:14px; font-weight:700; letter-spacing:.04em}
.gong .gz{display:block; font-size:12px; color:var(--mp-muted)}
.gong .tags{position:absolute; top:5px; right:5px; display:flex; gap:3px}
.gong .tag{font-size:10.5px; line-height:1; padding:3px; border:1px solid var(--mp-zi); color:var(--mp-zi); background:var(--mp-paper)}
.zw-center{position:relative; z-index:1; grid-column:2 / span 2; grid-row:2 / span 2; padding:clamp(10px,1.6vw,18px); border-right:1px solid var(--mp-ink); border-bottom:1px solid var(--mp-ink);
  background:transparent; display:flex; flex-direction:column; justify-content:center; gap:2px; font-size:13.5px; line-height:1.6; min-width:0}
.zw-center .cn{font-size:19px; font-weight:900; letter-spacing:.14em; margin-bottom:4px}
.zw-center p{margin:0}
.zw-center .k{color:var(--mp-faint); margin-right:.5em; font-size:12px}
.zw-center .legend{margin-top:6px; font-size:11.5px; color:var(--mp-faint)}
.zw-lines{position:absolute; inset:0; z-index:0; width:100%; height:100%; pointer-events:none; overflow:visible}
.zw-lines line{stroke:var(--mp-zi); stroke-width:1.2; stroke-dasharray:4 4; opacity:.55}
.zw-lines circle{fill:var(--mp-zi)}
.zw-none{padding:28px 22px; border:1px dashed var(--mp-line); color:var(--mp-muted); font-size:15px}

.gong-detail{margin-top:14px; padding:14px 18px; background:var(--mp-card); border-left:3px solid var(--mp-zi); font-size:14.5px}
.gong-detail h3{margin:0 0 6px; font-size:17px; letter-spacing:.1em}
.gong-detail h3 small{font-size:12.5px; font-weight:400; color:var(--mp-faint); margin-left:.6em; letter-spacing:.02em}
.gong-detail p{margin:2px 0}
.gong-detail .k{display:inline-block; min-width:4.6em; color:var(--mp-faint); font-size:13px}
.gong-detail .acts{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.gong-ai{margin-top:12px; padding-top:10px; border-top:1px dashed var(--mp-line)}
.gong-nav{display:flex; gap:6px; flex-wrap:wrap; margin-top:12px}
.gong-nav button{padding:3px 9px; font-size:13px; border:1px solid var(--mp-line); background:var(--mp-paper); color:var(--mp-muted)}
.gong-nav button.done::after{content:" ·"; color:var(--mp-zi)}
.gong-nav button.on{border-color:var(--mp-zi); color:var(--mp-zi)}

/* ---------- 两行 ---------- */
.liang{margin-top:clamp(28px,4vw,48px); padding-top:clamp(18px,3vw,28px); border-top:1px solid var(--mp-line)}
.liang .lead{margin:-6px 0 6px; font-size:14px; color:var(--mp-muted)}
.liang .lead cite{font-style:normal; color:var(--mp-faint)}
.tl-scroll{overflow-x:auto; padding:24px 0 6px}
.tl{position:relative; min-width:760px; display:grid; grid-template-columns:5.2em 1fr; row-gap:8px}
.tl .lbl{font-size:13.5px; color:var(--mp-muted); letter-spacing:.08em; align-self:center}
.tl .track{position:relative; height:46px}
.tl .seg2{position:absolute; top:0; bottom:0; display:flex; flex-direction:column; justify-content:center; align-items:center; overflow:hidden;
  border:1px solid var(--mp-line); border-right:0; background:var(--mp-card); font-size:13px; line-height:1.3; white-space:nowrap}
.tl .seg2:last-child{border-right:1px solid var(--mp-line)}
.tl .seg2 b{font-size:15.5px; font-weight:900}
.tl .seg2 small{font-size:11px; color:var(--mp-faint)}
.tl .seg2.pre{background:transparent; color:var(--mp-faint)}
.tl .seg2.now{background:var(--mp-zi-air); border-color:var(--mp-zi)}
.tl .seg2.zw{cursor:pointer}
.tl .axis{position:relative; height:34px; border-top:1px solid var(--mp-ink)}
.tl .tick{position:absolute; top:0; transform:translateX(-50%); font-size:11.5px; color:var(--mp-faint); text-align:center; line-height:1.3; padding-top:4px}
.tl .tick::before{content:""; position:absolute; top:-1px; left:50%; height:5px; border-left:1px solid var(--mp-ink)}
.tl .today{position:absolute; top:-8px; bottom:-40px; border-left:1.5px solid var(--mp-zi); pointer-events:none; z-index:2}
.tl .today span{position:absolute; top:-18px; left:-2em; width:4em; text-align:center; font-size:11.5px; color:var(--mp-zi); letter-spacing:.1em}
.tl .tracks{grid-column:2; position:relative; display:grid; row-gap:8px}
.liang .pair{margin:16px 0 0; font-size:14.5px; max-width:44em}
.liang .pair p{margin:4px 0}
.liang .pair .k{color:var(--mp-faint); font-size:13px; margin-right:.5em}

/* ---------- AI ---------- */
.ai{margin-top:clamp(28px,4vw,48px); padding-top:clamp(18px,3vw,28px); border-top:1px solid var(--mp-line); max-width:46em}
.focus{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px}
.focus button{padding:6px 14px; border:1px solid var(--mp-line); font-size:15px; letter-spacing:.06em; background:var(--mp-card)}
.focus button[aria-pressed="true"]{border-color:var(--mp-ink); background:var(--mp-ink); color:var(--mp-paper)}
.ai-acts{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.md{font-size:16px; line-height:1.9}
.md h3{margin:18px 0 4px; font-size:15.5px; letter-spacing:.12em}
.md h3:first-child{margin-top:0}
.md p{margin:0 0 10px}
.md ul, .md ol{margin:0 0 10px; padding-left:1.3em}
.md .cursor{display:inline-block; width:.55em; height:1em; vertical-align:-.12em; background:var(--mp-ink); animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.ai-out{margin-top:18px}
.ai-note{margin-top:14px; font-size:14.5px; color:var(--mp-muted); padding:12px 16px; border:1px dashed var(--mp-line); border-radius:var(--mp-r-card)}
.ai-note code{font-family:inherit; color:var(--mp-ink); background:var(--mp-band); padding:0 .3em}
.cached{font-size:12.5px; color:var(--mp-faint)}

/* ---------- 对话 ---------- */
.fab{position:fixed; right:max(16px, calc((100vw - 1280px) / 2 + 16px)); bottom:calc(20px + var(--safe-b)); z-index:25; display:flex; align-items:center; gap:8px;
  height:52px; padding:0 20px 0 16px; border-radius:999px; background:var(--mp-ink); color:var(--mp-paper); box-shadow:var(--ws-shadow-medium); font-size:16px; letter-spacing:.12em}
.fab i{width:10px; height:10px; border-radius:50%; background:radial-gradient(circle, #FFF8E6 0 30%, #F2C97A 60%, transparent 72%); box-shadow:0 0 10px #F2C97A}
.chat .sheet-panel{height:88dvh; max-width:720px; padding:0 0 var(--safe-b)}
@media (min-width: 900px){
  .chat .sheet-panel{left:auto; right:0; top:0; bottom:0; height:auto; max-height:none; width:440px; border-radius:0; animation:side .25s cubic-bezier(.2,.8,.2,1); border-left:1px solid var(--mp-line)}
  .chat .sheet-bg{background:rgba(20,18,24,.18)}
}
@keyframes side{from{transform:translateX(100%)}to{transform:none}}
.chat-h{display:flex; align-items:center; gap:10px; padding:14px 16px 12px; border-bottom:1px solid var(--mp-line)}
.chat-h .t{font-size:17px; font-weight:900; letter-spacing:.1em}
.chat-h .t small{display:block; font-size:12.5px; font-weight:400; color:var(--mp-faint); letter-spacing:.02em}
.chat-h .sp{flex:1}
.chat-h button{font-size:14px; color:var(--mp-muted); padding:6px 4px}
.msgs{flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:14px; overscroll-behavior:contain}
.msg{max-width:92%}
.msg.u{align-self:flex-end; background:var(--mp-ink); color:var(--mp-paper); padding:8px 14px; border-radius:14px 14px 4px 14px; font-size:15.5px; line-height:1.65; white-space:pre-wrap}
.msg.a{align-self:flex-start}
.msg.a .md{font-size:15.5px; line-height:1.85}
.starters{display:flex; flex-direction:column; gap:8px; margin-top:auto}
.starters p{margin:0 0 4px; font-size:13.5px; color:var(--mp-faint)}
.starters button{align-self:flex-start; text-align:left; padding:8px 14px; border:1px solid var(--mp-line); border-radius:14px; background:var(--mp-paper); font-size:14.5px}
.composer{display:flex; align-items:flex-end; gap:8px; padding:10px 12px 12px; border-top:1px solid var(--mp-line); background:var(--mp-card)}
.composer textarea{flex:1; min-width:0; resize:none; max-height:140px; min-height:44px; border:1px solid var(--mp-line); border-radius:22px; background:var(--mp-paper); padding:10px 16px; font-size:16px; line-height:1.5}
.composer textarea:focus{outline:none; border-color:var(--mp-ink)}
.icon-btn{flex:none; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--mp-band)}
.icon-btn svg{width:22px; height:22px}
.icon-btn.send{background:var(--mp-ink); color:var(--mp-paper)}
.icon-btn.rec{background:var(--ws-red); color:var(--ws-white); animation:pulse 1.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(174,53,38,.5)}70%{box-shadow:0 0 0 12px rgba(174,53,38,0)}100%{box-shadow:0 0 0 0 rgba(174,53,38,0)}}
.voice-hint{padding:0 16px 6px; font-size:12.5px; color:var(--mp-faint)}

.toast{position:fixed; left:50%; bottom:calc(var(--tabbar-h) + var(--safe-b) + 20px); transform:translateX(-50%); z-index:60; padding:9px 18px; background:var(--mp-ink); color:var(--mp-paper); font-size:14.5px; border-radius:999px; box-shadow:var(--ws-shadow-medium); animation:fade .2s}



/* ===== 三术统一样式 开始（原件：三术/00_总纲/tokens/xuan-shared.css，三个应用一字不差） ===== */
/* ============================================================
   玄术 Xuan · 三术统一样式（知几、见性、相象共用）
   2026-10-21 起。这是原件：三个应用里各贴了一份一模一样的，
   改的时候三处一起改（知几 liuyao/index.html、见性 css/app.css、相象 index.html）。
   颜色都是总表 wushu-tokens.css 里的值，直接写数字，单文件的相象也能用。
   ============================================================ */
body{margin:0; background:#EFEDE6; color:#2B2B2B;
  font-family:"Songti SC","STSong","Source Han Serif SC","Noto Serif CJK SC","Noto Serif SC",serif;
  font-size:16px; line-height:1.75}
:focus-visible{outline:2px solid #2B2B2B; outline-offset:3px}

/* 页面宽度：三个一样，最宽 1280px */
.page{max-width:1280px; margin:0 auto; padding:clamp(12px,3vw,36px) clamp(14px,3vw,36px) 48px}
.frame{position:relative; padding:0}
@media (min-width:900px){ .frame{padding:clamp(16px,2.4vw,30px)} }

/* 页首：中文名 + 英文名 · 内容，右边引文，下面一条细线 */
.head{display:flex; align-items:flex-end; justify-content:space-between; gap:10px 24px; flex-wrap:wrap;
  padding:4px 2px 16px; margin:0 0 18px; border-bottom:1px solid #D9D7D0}
.title{margin:0; font-size:clamp(28px,3.2vw,36px); font-weight:900; letter-spacing:.12em; line-height:1.1}
.title small{font-size:.5em; font-weight:400; letter-spacing:.14em; color:#6E6E68; margin-left:.6em}
.motto{margin:0; font-size:13.5px; color:#6E6E68; letter-spacing:.04em; max-width:31em; line-height:1.7}
.motto p{margin:0} .motto p + p{margin-top:4px}
.motto cite{font-style:normal; color:#8A8A83; margin-left:.5em; white-space:nowrap}

/* 按钮：墨色实心直角；ghost 是描边 */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:10px 26px;
  border:0; border-radius:0; background:#2B2B2B; color:#EFEDE6; font-family:inherit; font-size:17px;
  letter-spacing:.2em; text-indent:.2em; cursor:pointer}
.btn:disabled{opacity:.35; cursor:default}
@media (hover:hover){ .btn:not(:disabled):hover{background:#0E0E0C} }
.btn.ghost{background:none; color:#2B2B2B; box-shadow:inset 0 0 0 1px #2B2B2B}
@media (hover:hover){ .btn.ghost:hover{background:#E3E1DB} }

/* 页脚小字 */
.foot{margin:28px 2px 0; font-size:12px; color:#8A8A83; letter-spacing:.04em; line-height:1.7}
/* ===== 三术统一样式 结束 ===== */
/* 见性自己的：页面底部给底部页签栏留位置 */
.page{padding-bottom:calc(var(--tabbar-h) + var(--safe-b) + 28px)}
body.on-chart .page{padding-bottom:calc(var(--safe-b) + 90px)}

/* ---------- 宽屏 ---------- */
/* 2026-10-21 去掉双线版框（玄术新样式：不要边框），只留内边距 */
@media (min-width: 900px){
  .cbar{margin:-12px -10px 10px; padding:8px 10px}
}

/* ---------- 手机 ---------- */
@media (max-width: 760px){
  .tabs{display:flex; position:sticky; top:52px; z-index:14; margin:0 -4px 14px; padding:4px; background:var(--mp-paper); border-bottom:1px solid var(--mp-line)}
  .tabs button{flex:1; padding:8px 0; font-size:15.5px; letter-spacing:.16em; text-indent:.16em; color:var(--mp-muted); border-bottom:2px solid transparent}
  .tabs button[aria-selected="true"]{color:var(--mp-ink); font-weight:700; border-bottom-color:var(--mp-ink)}
  .result[data-tab="bazi"] .p-zw, .result[data-tab="bazi"] .liang, .result[data-tab="bazi"] .ai,
  .result[data-tab="ziwei"] .p-bz, .result[data-tab="ziwei"] .liang, .result[data-tab="ziwei"] .ai,
  .result[data-tab="liang"] .p-bz, .result[data-tab="liang"] .p-zw, .result[data-tab="liang"] .ai, .result[data-tab="liang"] .yun-wrap,
  .result[data-tab="ai"] .p-bz, .result[data-tab="ai"] .p-zw, .result[data-tab="ai"] .liang, .result[data-tab="ai"] .yun-wrap{display:none}
  .result[data-tab="liang"] .liang, .result[data-tab="ai"] .ai{margin-top:0; padding-top:0; border-top:0}
  .pillars .big{font-size:24px}
  .pillars .yc.big{font-size:21px}
  .pillars .hide{font-size:11px}
  .pillars .ss, .pillars .sm{font-size:11.5px}
  .pillars .sha{font-size:10.5px}
  .ys b{font-size:19px}
  .ycell{min-width:3.2em; padding:5px 4px 4px}
  .ycell .gz{font-size:16px}
  .gong{padding:4px 3px 3px}
  .gong .ma{font-size:13px}
  .gong .mi{font-size:11px}
  .gong .adj, .gong .ft .l span.cs, .g-suf, .bzz{display:none}
  .gong .gn{font-size:12px; padding:0 2px; letter-spacing:0}
  .gong .ft{display:block; font-size:10px}
  .gong .ft .r{text-align:left}
  .gong .gz{display:inline; margin-left:3px; font-size:10px}
  .gong .tag{font-size:9px; padding:2px}
  .gong .yt span{font-size:9.5px; padding:0 2px}
  .gong .stars{gap:0 3px; line-height:1.3}
  .hua{font-size:9px; min-width:1.15em; margin-left:1px}
  .gong .ma em, .gong .mi em{font-size:8.5px}
  .zw-center{font-size:11.5px; line-height:1.5; padding:8px}
  .zw-center .cn{font-size:15px; margin-bottom:0}
  .zw-center .k{font-size:10.5px}
  .zw-center .hide-m{display:none}
  .fab{bottom:calc(16px + var(--safe-b)); width:56px; height:56px; padding:0; justify-content:center; border-radius:50%; font-size:0; letter-spacing:0}
  .fab::after{content:"问"; font-size:18px; letter-spacing:0}
  .fab i{display:none}
}
@media (prefers-reduced-motion: reduce){ .md .cursor, .icon-btn.rec{animation:none} .sheet-panel, .sheet-bg{animation:none} }