/* 观爻 · 手机单屏纯净排盘版（2026-10-31 按效果稿定稿改版）。
   原则：三个视图各自整屏呈现，页面不滚动；次级信息进抽屉与弹层。
   关系集 .rl-* 、对照表 .comparison-table / .line-* 类名与既有 JS 契约保持不变。 */
:root{--paper:#f5f3ec;--card:#fffef9;--ink:#263d36;--green:#183e35;--muted:#797e72;--line:#e3e3d7;--red:#a94c38;--wash:#eeefe6;--gold:#b98a2f;--serif:"Songti SC","STSong","SimSun","Noto Serif CJK SC",serif;--sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;--wood:#287047;--fire:#a6382e;--earth:#8a6400;--metal:#65717d;--water:#244e73}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:14px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit}
button,a,input,select,textarea,label{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:disabled{cursor:wait;opacity:.58}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #8ba995;outline-offset:3px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 应用壳：顶栏 + 单屏内容区 + 底部导航；宽屏居中成窄栏工具。 */
.app-shell{height:100vh;height:100dvh;display:flex;flex-direction:column;max-width:560px;margin:0 auto;background:var(--paper)}
@media(min-width:720px){.app-shell{border-left:1px solid var(--line);border-right:1px solid var(--line)}}
.top-bar{flex:none;display:flex;align-items:center;gap:9px;padding:6px 14px;background:var(--card);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--green);font:17px var(--serif);letter-spacing:2px}
.brand-seal{font:13px var(--serif);color:#fff9ee;background:var(--red);width:24px;height:26px;display:grid;place-items:center;border-radius:4px 5px 3px 5px;box-shadow:inset 0 0 0 2px #ffffff18;flex:none}
.brand small{display:block;font:9px var(--sans);letter-spacing:1px;color:var(--muted);margin-top:1px}
.top-pill{margin-left:auto;white-space:nowrap;font-size:10px;color:var(--muted);border:1px solid var(--line);border-radius:20px;padding:3px 9px;background:var(--paper)}
.app-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:8px 10px 10px;display:flex;flex-direction:column;gap:8px}
.view{display:none}
.view.active{display:flex;flex-direction:column;gap:8px}
.bottom-nav{flex:none;display:flex;justify-content:space-around;gap:0;background:#fffef9f0;border-top:1px solid var(--line);padding:5px 10px calc(7px + env(safe-area-inset-bottom));backdrop-filter:blur(12px)}
.bottom-nav button{border:0;background:transparent;color:#999d90;font-size:10px;display:flex;flex-direction:column;gap:0;align-items:center;width:76px;padding:1px 0}
.bottom-nav button span{font:19px/1.2 var(--serif)}
.bottom-nav button.active{color:var(--green)}
.bottom-nav button.active:after{content:"";height:3px;width:14px;background:var(--green);border-radius:4px;margin-top:1px}
.toast{position:fixed;left:50%;bottom:calc(72px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(8px);max-width:min(340px,calc(100vw - 32px));background:#223c33e8;color:#fffdf3;font-size:12px;line-height:1.6;padding:8px 14px;border-radius:20px;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;z-index:80;text-align:center;margin:0}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* 卡片与表单 */
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px 10px;box-shadow:0 4px 14px #23362905;min-width:0}
.hint{margin:2px 2px 0;font-size:10.5px;color:var(--muted)}
.f-label{margin:0 0 5px;font-size:12px;font-weight:550}
.f-label span{font-weight:400;color:var(--muted);font-size:10px;margin-left:5px}
textarea,input:not([type=checkbox]),select{width:100%;border:1px solid #dcded3;background:#fffefa;color:var(--ink);border-radius:6px;padding:6px 8px;min-height:34px;line-height:1.5}
textarea{resize:none;min-height:34px;display:block}
textarea::placeholder,input::placeholder{color:#999c90}
.field-note{font-size:9.5px;color:var(--muted);margin:5px 0 0}
.meta-row{display:grid;grid-template-columns:minmax(0,1fr) 62px 46px;gap:6px;align-items:end;margin-top:7px}
.meta-row .f label{display:block;font-size:10.5px;color:var(--muted);margin:0 0 4px}
.meta-row .now{border:1px solid #d4d9cd;background:var(--wash);color:var(--green);border-radius:6px;min-height:34px;font-size:12px;padding:0 4px}
.coin-head{display:flex;align-items:center;gap:8px}
.coin-head b{font-size:12.5px;font-weight:600}
.coin-head .tip{font-size:10px;color:var(--muted)}
.coin-head .prog{margin-left:auto;font-size:10px;background:var(--wash);color:#6c7a5d;border-radius:20px;padding:2px 8px;white-space:nowrap}
.coin-inputs{display:grid;gap:6px;margin:6px 0 0}
.coin-row{display:grid;grid-template-columns:32px minmax(0,1fr) 36px;gap:7px;align-items:center;margin:0;padding:0;border:0;min-width:0}
.coin-row legend{float:left;font-size:12px;line-height:1.4;padding:0}
.coin-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.coin-choice{position:relative;min-width:0}
.coin-choice input{position:absolute;opacity:0;width:1px;height:1px}
.coin-choice span{display:flex;align-items:center;justify-content:center;min-height:44px;font-size:14px;border:1px solid var(--line);border-radius:6px;background:#fffefa;color:var(--ink)}
.coin-choice input:checked+span{background:var(--green);color:#fffdf5;border-color:var(--green)}
.coin-choice input:focus-visible+span{outline:3px solid #8ba995;outline-offset:2px}
.coin-preview{display:flex;align-items:center;justify-content:center;gap:3px;color:var(--muted)}
.line-bar{height:5px;width:22px;background:var(--green);display:block;border-radius:1px;flex-shrink:0}
.line-bar.yin{background:linear-gradient(90deg,var(--green) 41%,transparent 41%,transparent 59%,var(--green) 59%)}
.moving-mark{font-size:12px;color:var(--red);line-height:1}
.button{border:1px solid transparent;border-radius:7px;min-height:40px;padding:8px 14px;font-weight:550;font-size:14px;text-align:center}
.primary{background:var(--green);color:#fffdf3}
.primary:hover{background:#245045}
.wide{width:100%;margin-top:2px}
.foot{margin:2px 0 0;font-size:10px;color:var(--muted);text-align:center;line-height:1.7}
.error{font-size:12px;color:#a63e2e;background:#f8eeea;padding:10px;border-radius:6px;margin:0}

/* 卦盘卡：日期行 + 问句行 + 四柱旬空一行 + 本变同行六行表 */
.chart-card{padding:10px 12px}
.chart-top{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.cdate{font-size:11px;color:var(--muted)}
.pill-btn{margin-left:auto;border:1px solid var(--line);border-radius:20px;background:var(--paper);color:#6c7a5d;font-size:10.5px;padding:3px 9px;font-family:inherit;white-space:nowrap}
.q-line{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;font-size:11.5px;line-height:1.55;color:var(--ink);margin:0 0 5px;cursor:pointer}
.q-line.open{-webkit-line-clamp:4}
.q-line .qm{color:var(--red);font-family:var(--serif);margin-right:5px}
.pillars{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;text-align:center;padding:1px 0 4px;border-bottom:1px solid var(--line)}
.pillar>span{display:block;font-size:9px;color:var(--muted);letter-spacing:1px}
.pillar b{display:block;font:16px/1.3 var(--serif);font-weight:400;margin-top:1px;letter-spacing:.5px;white-space:nowrap}
.chart-empty{padding:36px 10px 26px;text-align:center}
.empty-hex{width:76px;margin:0 auto 22px;opacity:.28}
.empty-hex i{display:block;height:6px;background:var(--green);margin:8px 0}
.empty-hex i.broken{background:linear-gradient(90deg,var(--green) 43%,transparent 43%,transparent 57%,var(--green) 57%)}
.empty-title{font:18px var(--serif);font-weight:500;margin:0 0 12px}
.empty-copy{color:#94988b;font-size:12px;line-height:2;margin:0}

/* 同一张六行表共享六神；动符居中列、六亲干支同行、天干可藏（类名与 JS 契约不变）。 */
.comparison-table{width:100%;table-layout:fixed;border-collapse:collapse;font-size:13px;margin-top:4px}
.comparison-table th,.comparison-table td{padding:1px 3px;border-bottom:1px solid #eceadb;vertical-align:middle}
.comparison-table thead th{border-bottom:1px solid var(--line);padding:3px 2px;font-weight:400}
.comparison-table .shared-heading{width:36px;color:var(--muted);font-size:11px;font-weight:400;padding-left:0;padding-right:2px;vertical-align:bottom}
.hexagram-heading{text-align:center;font-weight:400}
.hexagram-label{display:block;font-size:9px;color:var(--muted);letter-spacing:2px}
.hexagram-heading h3{font:17px/1.3 var(--serif);font-weight:400;margin:0;color:var(--green);letter-spacing:1px}
.hexagram-palace{display:block;font-size:9px;color:var(--muted)}
.comparison-table .mark-heading{width:20px;padding:0}
.comparison-table .line-mark{text-align:center;color:var(--red);font-size:13px;padding:2px 0 0}
.comparison-table .line-shared{padding-left:0;padding-right:2px;text-align:left;font-weight:400}
.line-spirit{display:block;font-size:12px;line-height:1.4;white-space:nowrap;border:0;background:none;padding:0;color:var(--ink);cursor:pointer;text-align:left;font-family:inherit}
.line-position{display:block;font-size:9px;line-height:1.4;font-weight:400;color:var(--muted);margin-top:1px}
.line-cell{min-width:0}
.line-main{display:grid;grid-template-columns:minmax(0,1fr) 24px 12px;gap:3px;align-items:center;min-height:28px}
.line-facts{min-width:0;line-height:1.4}
.line-stem-branch,.line-relative{display:inline;font-size:14px;white-space:nowrap}
.line-relative{color:var(--ink);margin-right:1px}
.comparison-table .line-shape{display:flex;align-items:center;justify-content:center;gap:1px;white-space:nowrap}
.comparison-table .line-bar{width:22px;height:5px}
.comparison-table .moving-mark{font-size:12px;line-height:1}
.line-roles{text-align:center}
.comparison-table .line-tag{font-size:11px;margin:0;color:var(--red)}
.line-hidden{display:block;font-size:10.5px;line-height:1.4;margin-top:1px;color:var(--ink)}
.has-changed .changed-cell,.has-changed .hexagram-heading:last-child{border-left:1px solid var(--line)}
.hex-tag{border:0;background:none;padding:0;color:var(--red);font-size:11px;font-family:var(--sans);font-weight:400;cursor:pointer;vertical-align:2px}
#chart-content.stem-hidden .line-stem{display:none}

/* 五行文字颜色：只对明确卦盘字段生效；「日辰」整词纯黑。 */
.wuxing{font:inherit!important;letter-spacing:inherit;white-space:inherit}
.wuxing-wood{color:var(--wood)!important}.wuxing-fire{color:var(--fire)!important}.wuxing-earth{color:var(--earth)!important}.wuxing-metal{color:var(--metal)!important}.wuxing-water{color:var(--water)!important}
.day-term{color:#000!important;font:inherit;letter-spacing:inherit}

/* 关系集字母：收集条一行十二槽 + 状态行 + 六入口；六组装进半出抽屉（组件契约不变）。 */
.rl-panel{margin-top:4px}
.rl-collect{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:3px}
.rl-letter{display:grid;place-items:center;gap:0;padding:1px 0;min-height:32px;border:1px solid var(--line);border-radius:7px;background:var(--paper);color:#b9bdb1}
.rl-letter b{font:13px var(--serif);font-weight:400;line-height:1.1}
.rl-letter i{font-style:normal;font-size:7.5px;line-height:1.15}
.rl-letter small{font-size:7.5px;color:var(--muted);line-height:1.15;text-align:center;white-space:nowrap}
.rl-letter.on{border-color:#9db8a8;background:var(--wash);color:var(--green);box-shadow:inset 0 0 0 1px #b8ccbd}
.rl-letter.on b{color:var(--wx,var(--green))}
.rl-status{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:4px 1px 0}
.rl-status b{color:var(--gold);font-weight:600}
.rl-entries{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;margin-top:6px}
.rl-entry{border:1px solid var(--line);border-radius:9px;background:var(--paper);color:var(--green);padding:5px 1px;font-size:10.5px;text-align:center;white-space:nowrap}
.rl-entry:hover{background:var(--wash)}
.rl-mask{position:fixed;inset:0;background:#14261f66;opacity:0;pointer-events:none;transition:opacity .15s;z-index:60}
.rl-sheet{position:fixed;left:0;right:0;bottom:0;top:26%;margin:0 auto;max-width:720px;background:var(--paper);border-radius:18px 18px 0 0;transform:translateY(103%);transition:transform .18s ease-out;display:flex;flex-direction:column;z-index:61;box-shadow:0 -8px 30px #14261f33}
body.rl-drawer-open{overflow:hidden}
body.rl-drawer-open .rl-mask{opacity:1;pointer-events:auto}
body.rl-drawer-open .rl-sheet{transform:translateY(0)}
.rl-grab{width:36px;height:4px;border-radius:2px;background:var(--line);margin:8px auto 0}
.rl-head{display:flex;align-items:center;justify-content:space-between;padding:8px 14px 6px}
.rl-title{flex:1;text-align:center}
.rl-title b{font:15px var(--serif);color:var(--green);letter-spacing:2px;display:block}
.rl-title span{font-size:10.5px;color:var(--muted)}
.rl-close{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--muted);font-size:13px;cursor:pointer}
.rl-scroll{flex:1;overflow-y:auto;padding:2px 14px 8px;-webkit-overflow-scrolling:touch;transform:translateZ(0)}
.rl-section{padding:6px 0 4px}
.rl-section+.rl-section{border-top:1px solid var(--line)}
.rl-section h4{font:12px var(--sans);color:var(--muted);letter-spacing:2px;font-weight:400;margin:6px 0 9px}
.rl-frames{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
#rl-pg-Cs{grid-template-columns:1fr}
.rl-frame{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:8px 8px 9px}
.rl-frame .tag{font-size:9.5px;letter-spacing:2px;color:var(--muted);display:block;text-align:center;margin-bottom:7px}
.rl-frame .cards{display:flex;justify-content:center;gap:7px}
.rl-branch{width:45px;display:grid;place-items:center;gap:0;padding:7px 0 5px;border:1px solid var(--line);border-radius:9px;background:var(--paper);color:#b9bdb1;position:relative}
.rl-branch b{font:20px var(--serif);font-weight:400}
.rl-branch i{font-style:normal;font-size:9px}
.rl-branch small{font-size:8px;line-height:1.1;color:var(--gold);min-height:9px}
.wx-wood{--wx:var(--wood);--wxb:#7fb89a}
.wx-fire{--wx:var(--fire);--wxb:#d9a094}
.wx-earth{--wx:var(--earth);--wxb:#c9ad62}
.wx-metal{--wx:var(--metal);--wxb:#a7b3bf}
.wx-water{--wx:var(--water);--wxb:#8fb3c9}
.rl-branch.on{color:var(--ink);background:var(--wash);border-color:var(--wxb,#9db8a8)}
.rl-branch.on b{color:var(--wx,var(--green))}
.rl-branch.on i{color:var(--wx,var(--green))}
.rl-branch.is-move{background-image:radial-gradient(circle at calc(100% - 6px) 6px,var(--red) 0 3.5px,transparent 4px)}
.rl-frame.lit{border-color:var(--gold);background:linear-gradient(180deg,#fdf8ec,var(--card) 70%);box-shadow:0 0 0 1px var(--gold),0 0 12px #b98a2f40}
.rl-frame.lit .tag{color:var(--gold)}
.rl-note{font-size:10px;color:var(--muted);margin-top:10px;line-height:1.7}
.rl-actions{display:flex;flex-wrap:wrap;gap:6px;padding:6px 14px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.rl-action{border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);font-size:11px;padding:6px 12px;cursor:pointer}

/* 卦盘操作行与象意弹层 */
.acts{display:flex;gap:6px}
.act{flex:1;border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--ink);font-size:11px;padding:7px 4px;font-family:inherit;cursor:pointer}
#spirit-pop{position:fixed;z-index:70;max-width:250px;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px #10251e2e;padding:10px 12px;font-size:12px;line-height:1.7;color:var(--ink)}
#spirit-pop .sp-head{margin:0}
#spirit-pop .sp-name{font:14px var(--serif);color:var(--green);letter-spacing:2px;margin-right:8px}
#spirit-pop .sp-pos{font-size:10px;color:var(--muted)}
#spirit-pop .sp-text{margin:4px 0 0}
#spirit-pop .sp-note{margin:6px 0 0;font-size:10px;color:var(--muted);border-top:1px dashed var(--line);padding-top:5px}

/* 记录页 */
.history-list{display:grid;gap:8px}
.history-card{display:flex;align-items:center;gap:10px}
.history-card .ht{min-width:0;flex:1}
.history-card .h-date{font-size:10px;color:var(--muted);margin:0}
.history-card h2{font-size:13px;font-weight:550;margin:2px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.history-card .h-sub{font-size:11px;color:#56645a;margin:0}
.history-actions{flex-shrink:0;display:flex;gap:6px}
.history-actions .go{border:1px solid #d4d9cd;background:transparent;color:var(--green);border-radius:7px;min-height:36px;padding:4px 12px;font-size:12px}
.text-button{border:0;background:none;color:var(--muted);padding:8px 6px;font-size:12px;white-space:nowrap}
.empty-history{margin:0;text-align:center;padding:26px 10px}
.empty-history h2{font:18px var(--serif);font-weight:500;margin:0 0 10px}
.empty-history p{color:var(--muted);font-size:12px;line-height:1.9;margin:0}

/* 确认弹窗 */
dialog{border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);max-width:430px;width:calc(100% - 36px);padding:0;box-shadow:0 25px 100px #10251e40}
dialog::backdrop{background:#17352d66;backdrop-filter:blur(3px)}
.dialog-body{padding:24px}
.eyebrow{font-size:11px;letter-spacing:3px;color:var(--red)}
.dialog-body h2{font:22px var(--serif);margin-top:8px}
.dialog-body p{font-size:13px;color:var(--muted);margin:14px 0 20px}
.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin:0}
.dialog-actions .button{min-height:38px}

/* 矮屏（≤700，覆盖 375×667 的 SE/8 与 360×640 小屏）压缩密度，保持整屏不滚 */
@media (max-height:700px){
.app-body{padding:5px 8px 8px;gap:6px}
.view.active{gap:6px}
.card{padding:6px 8px}
.hint,.foot{display:none}
textarea,input:not([type=checkbox]),select{min-height:28px;padding:5px 7px}
.meta-row{margin-top:4px}
.meta-row .now{min-height:28px}
.coin-inputs{gap:4px;margin-top:3px}
.coin-row{gap:5px}
.coin-options{gap:4px}
.coin-choice span{min-height:44px}
.button{min-height:32px;padding:5px 12px}
.chart-card{padding:7px 9px}
.chart-top{margin-bottom:3px}
.q-line{margin-bottom:4px;font-size:11px}
.pillars{padding-bottom:3px;gap:3px}
.pillar b{font-size:14px}
.hexagram-heading h3{font-size:15px}
.comparison-table{margin-top:2px}
.comparison-table th,.comparison-table td{padding:1px 2px}
.comparison-table thead th{padding:3px 2px}
.line-main{min-height:26px}
.cl,.rl-letter{min-height:28px}
.rl-status{margin-top:3px;font-size:10.5px}
.rl-entries{margin-top:3px;gap:4px}
.rl-entry{padding:4px 1px;font-size:10px}
.act{padding:4px;font-size:10.5px}
.empty-history{padding:16px 8px}
}
@media (prefers-reduced-motion:no-preference){.button,.act,.rl-entry,.toast{transition:background .18s,color .18s,opacity .18s,transform .18s}.rl-frame{transition:box-shadow .2s,border-color .2s}}