/* =========================================================
   六爻排盘
   源文件行号：351-381
   ========================================================= */

/* ============ 六爻排盘 ============ */
.question-display { font-size: 15px; font-weight: 600; color: var(--accent-dark); margin-bottom: 16px; }
.header-top { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.mode-toggle { display: flex; background: #EBE7DF; border-radius: 16px; padding: 2px; font-size: 12px; }
.mode-btn { padding: 4px 12px; border-radius: 14px; cursor: pointer; color: var(--text-sub); }
.mode-btn.active { background: white; color: var(--accent-dark); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.sizhu-box { background: #F0EBE1; border-radius: 8px; padding: 10px 0; display: flex; justify-content: center; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--accent-dark); letter-spacing: 0; margin-bottom: 8px; white-space: nowrap; overflow: hidden; }
.sizhu-box .red { color: var(--accent-red); }
.sizhu-box .kongwang { font-size: 13px; color: var(--text-sub); font-weight: normal; margin-left: 2px; }
.gua-desc { display: flex; justify-content: center; gap: 10px; font-size: 11.5px; color: var(--text-sub); margin-bottom: 10px; white-space: nowrap; overflow: hidden; max-width: 100%; }
.gua-desc b { font-weight: 700; color: var(--text-main); }
.gua-desc .gua-line { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.gua-desc .gua-line i { font-style: normal; color: var(--accent-gold); margin: 0 3px; }
.pro-data { display: none; font-size: 12px; color: var(--text-sub); margin-bottom: 16px; line-height: 1.8; background: #FDFBF7; padding: 10px 12px; border-radius: 8px; border: 1px solid #F0EAE1; }
.pro-data.show { display: block; }
.pro-data span { display: inline-block; margin-right: 12px; }

.guaxiang-container { padding: 0 20px 20px 20px; }
.yao-row { display: flex; align-items: center; justify-content: center; position: relative; padding: 6px 0; gap: 2px; border-radius: 6px; margin-bottom: 2px; }
.yao-row.highlighted { background-color: rgba(185, 154, 107, 0.1); }
.col-seal { width: 14px; text-align: center; }
.col-fushen { width: 54px; text-align: right; font-size: 12px; color: var(--accent-red); white-space: nowrap; }
.col-liuqin { width: 36px; text-align: center; font-size: 13.5px; color: var(--text-sub); white-space: nowrap; }
.col-dizhi { width: 28px; text-align: center; font-size: 14px; font-weight: 600; color: var(--text-main); white-space: nowrap; }
.col-shiying { width: 18px; text-align: center; margin-left: 2px; }
.col-yao { width: 28px; text-align: center; font-size: 17px; color: var(--accent-dark); margin: 0 4px; }
.col-bian { width: 24px; text-align: center; font-size: 14px; font-weight: 600; white-space: nowrap; margin-left: 4px; }
.col-liushen { width: 32px; text-align: left; font-size: 12.5px; color: var(--text-sub); white-space: nowrap; }
.col-yao .yang { display: inline-block; width: 18px; height: 4px; background: var(--accent-dark); vertical-align: middle; }
.col-yao .yin { display: inline-block; width: 7px; height: 4px; background: var(--accent-dark); vertical-align: middle; margin: 0 1px; }
.shi-ying { font-size: 12px; color: var(--accent-green); border: 1px solid var(--accent-green); border-radius: 2px; padding: 0 3px; }
.moving-mark { color: var(--accent-red); font-weight: bold; font-size: 22px; line-height: 1; }

/* 结果页盘面：左侧对齐并铺满可用宽度 */
#page-liuyao-result .ly-head,
#liuyao-table .ly-row {
    grid-template-columns: 52px 38px 34px 34px 44px 34px 36px;
    column-gap: 6px;
}
#liuyao-table .ly-bian { margin-left: 8px; }
#page-liuyao-result .ly-head span:last-child { padding-left: 8px; }

/* 填写推演事由后再展开推演方式 */
.method-area { display: none; }
.method-area.show { display: block; animation: liuyaoMethodIn .28s ease-out; }
.method-hint {
    margin: 2px 0 0; font-size: 11px; color: var(--text-light);
    letter-spacing: .3px; line-height: 1.6;
}
.method-hint.hide { display: none; }
@keyframes liuyaoMethodIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 卦名推演：64 卦选择页 */
.gua-select-tabs { display: flex; gap: 8px; margin: 8px 20px 0; }
.gua-target {
    flex: 1; border: 1px solid var(--border-color); background: #FFFFFF;
    border-radius: 10px; padding: 8px 6px; cursor: pointer;
    font-family: inherit; font-size: 11.5px; color: var(--text-sub);
}
.gua-target span { display: block; font-size: 9px; color: var(--text-light); margin-top: 2px; }
.gua-target.active { border-color: var(--accent-gold); background: #FFFDF8; color: var(--text-main); font-weight: 700; }
.gua-select-tip { margin: 8px 20px 10px; font-size: 10.5px; color: var(--text-light); }
.gua-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
    padding: 0 16px 110px;
}
.gua-cell {
    min-height: 54px; border: 1px solid #EEE8DD; background: #FFFFFF;
    border-radius: 8px; cursor: pointer; font-family: inherit;
    font-size: 10.5px; color: var(--text-main); line-height: 1.35;
    padding: 4px 2px; display: flex; align-items: center; justify-content: center;
    text-align: center;
}
.gua-cell.active-ben { border-color: var(--accent-gold); background: #FFF8E9; font-weight: 700; }
.gua-cell.active-bian { border-color: var(--accent-red); background: #FBF0EE; font-weight: 700; }
.gua-select-bottom {
    position: sticky; bottom: 0; z-index: 5;
    margin-top: -90px; padding: 10px 20px calc(12px + env(safe-area-inset-bottom));
    background: rgba(248, 246, 240, 0.96); border-top: 1px solid var(--border-color);
    display: flex; align-items: center; gap: 10px;
    backdrop-filter: blur(8px);
}
.gua-selected-text { flex: 1; font-size: 10.5px; color: var(--text-sub); line-height: 1.5; }
.gua-confirm-btn {
    flex-shrink: 0; border: none; border-radius: 12px; padding: 9px 18px;
    background: var(--accent-dark); color: #FFFFFF; font-family: inherit;
    font-size: 12px; font-weight: 600; cursor: pointer;
}

/* 推演方式状态 + 底部参数弹窗 */
.method-status {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin: 10px 0 14px; padding: 11px 13px;
    background: #FFFFFF; border: 1px dashed var(--border-color);
    border-radius: 12px; cursor: pointer;
}
.method-status.ready { border-style: solid; background: #FFFDF8; border-color: #E8DDCB; }
.ms-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ms-main b { font-size: 12px; color: var(--text-main); }
.ms-main span { font-size: 10px; color: var(--text-light); line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.method-status em { font-style: normal; font-size: 10px; color: var(--accent-gold); flex-shrink: 0; }

.liuyao-method-sheet .modal-content { max-height: 84%; }
.lym-tip { font-size: 11px; color: var(--text-light); line-height: 1.6; margin: -4px 0 12px; text-align: center; }
.lym-body { overflow-y: auto; flex: 1; padding-bottom: 4px; }
.lym-field { margin-bottom: 10px; }
.lym-field label { display: block; font-size: 11px; color: var(--text-sub); margin-bottom: 6px; }
.lym-field .modal-input { margin-bottom: 0; }
.lym-help { font-size: 10px; line-height: 1.7; color: var(--text-light); margin-top: 7px; }

.lym-manual-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 11px; color: var(--text-sub); }
.lym-shake { border: 1px solid var(--border-color); background: #FFFFFF; border-radius: 12px; padding: 4px 10px; font-family: inherit; font-size: 10px; color: var(--accent-gold); cursor: pointer; }
.lym-coin-list { border: 1px solid #F0EBE1; border-radius: 12px; overflow: hidden; }
.lym-coin-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-top: 1px solid #F5F0E8; }
.lym-coin-row:first-child { border-top: none; }
.lym-line-label { width: 30px; flex-shrink: 0; font-size: 10px; color: var(--text-light); }
.lym-coins { display: flex; gap: 6px; flex: 1; }
.lym-coin { width: 32px; height: 32px; border-radius: 50%; border: 1px solid #D9C9AE; background: #FBF6EC; font-family: inherit; font-size: 10px; color: #8A7656; cursor: pointer; }
.lym-coin.back { background: #D8B77C; border-color: #C9A66C; color: #FFFFFF; font-weight: 700; }
.lym-line-state { width: 58px; flex-shrink: 0; text-align: right; font-size: 9.5px; color: var(--text-sub); }

.lym-spec-list { border: 1px solid #F0EBE1; border-radius: 12px; overflow: hidden; }
.lym-spec-row { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-top: 1px solid #F5F0E8; }
.lym-spec-row:first-child { border-top: none; }
.lym-spec-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; flex: 1; }
.lym-spec-opt { border: 1px solid #EDE6DA; background: #FFFFFF; border-radius: 6px; padding: 5px 2px; font-family: inherit; font-size: 9.5px; color: var(--text-sub); cursor: pointer; }
.lym-spec-opt.active { border-color: var(--accent-gold); background: #FFF8E9; color: var(--text-main); font-weight: 600; }

/* 选择方式入口 + 方式选择弹窗 + 参数页 */
.method-choice-btn {
    width: 100%; border: none; border-radius: 14px; padding: 13px 0;
    background: var(--accent-dark); color: #FFFFFF;
    font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: 1px;
    cursor: pointer;
}
.method-choice-tip {
    margin: 7px 0 0; text-align: center;
    font-size: 10px; color: var(--text-light); line-height: 1.5;
}

.method-picker-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.method-picker-item {
    border: 1px solid #EDE5D8; border-radius: 12px; background: #FFFFFF;
    padding: 11px 10px; text-align: left; cursor: pointer; font-family: inherit;
}
.method-picker-item:active { border-color: var(--accent-gold); background: #FFFDF8; }
.method-picker-item b { display: block; font-size: 12px; color: var(--text-main); margin-bottom: 4px; }
.method-picker-item span { display: block; font-size: 9px; color: var(--text-light); line-height: 1.5; }

.lym-page-tip { margin: 4px 20px 14px; font-size: 11px; color: var(--text-light); line-height: 1.6; }
.lym-page-body { padding: 0 20px 110px; }
.lym-page-bottom {
    position: sticky; bottom: 0; z-index: 6;
    padding: 10px 20px calc(12px + env(safe-area-inset-bottom));
    background: rgba(248, 246, 240, 0.96); border-top: 1px solid var(--border-color);
    backdrop-filter: blur(8px);
}
.lym-page-submit {
    width: 100%; height: 46px; border: none; border-radius: 14px;
    background: var(--accent-dark); color: #FFFFFF; font-family: inherit;
    font-size: 14px; font-weight: 600; letter-spacing: 2px; cursor: pointer;
}

#page-liuyao-method-input { padding-bottom: 0; }
#page-liuyao-method-input.active { display: flex; flex-direction: column; }
#page-liuyao-method-input .subpage-header,
#page-liuyao-method-input .lym-page-tip { flex-shrink: 0; }
#page-liuyao-method-input .lym-page-body { flex: 1; overflow-y: auto; padding-bottom: 20px; }
#page-liuyao-method-input .lym-page-bottom { position: static; flex-shrink: 0; }

/* 手动推演：三枚铜钱摇卦 */
.lym-toss-results {
    border: 1px solid #F0EBE1; border-radius: 12px;
    padding: 2px 10px; margin-bottom: 14px; background: #FFFFFF;
}
.lym-toss-row {
    display: flex; align-items: center; gap: 8px;
    min-height: 32px; border-top: 1px dashed #F2ECE1;
}
.lym-toss-row:first-child { border-top: none; }
.lym-toss-row.latest { background: #FFFBF2; }
.lym-toss-label { width: 42px; flex-shrink: 0; font-size: 10px; color: var(--text-light); }
.lym-toss-name { width: 34px; flex-shrink: 0; font-size: 10.5px; color: var(--text-main); }
.lym-toss-empty { font-size: 9.5px; color: #C9C2B7; }
.lym-yao-symbol { display: flex; align-items: center; gap: 4px; }
.lym-yao-solid { display: inline-block; width: 48px; height: 5px; border-radius: 1px; background: var(--accent-dark); }
.lym-yao-broken { display: inline-flex; gap: 6px; width: 48px; }
.lym-yao-broken i { width: 21px; height: 5px; border-radius: 1px; background: var(--accent-dark); }
.lym-moving { font-style: normal; font-size: 11px; color: var(--accent-red); margin-left: 2px; }

.lym-toss-coins { display: flex; justify-content: center; gap: 26px; margin: 8px 0 18px; }
.lym-toss-coin {
    width: 64px; height: 64px; border-radius: 50%; position: relative;
    border: 2px solid #B08B4F;
    background: radial-gradient(circle at 35% 30%, #F3DCA8, #D3AE6E 65%, #B98C4E);
    box-shadow: 0 5px 12px rgba(150, 115, 62, 0.28), inset 0 0 0 3px rgba(255,255,255,0.28);
    display: flex; align-items: flex-start; justify-content: center;
    padding-top: 7px;
}
.lym-toss-coin span { font-size: 9px; color: #6E5227; font-weight: 700; letter-spacing: .5px; z-index: 1; }
.lym-toss-coin::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: 13px; height: 13px; transform: translate(-50%, -50%);
    background: #FBF6EA; border: 1px solid #B08B4F; border-radius: 2px;
}
.lym-toss-coin.back { background: radial-gradient(circle at 35% 30%, #C9A463, #A77B3C 65%, #8C622C); }
.lym-toss-coin.back span { color: #FFF4D8; }
.lym-toss-coins.spinning .lym-toss-coin { animation: lymCoinSpin .55s linear infinite; }
.lym-toss-coins.spinning .lym-toss-coin:nth-child(2) { animation-delay: .08s; }
.lym-toss-coins.spinning .lym-toss-coin:nth-child(3) { animation-delay: .16s; }
@keyframes lymCoinSpin {
    0% { transform: rotateY(0deg) rotateX(0deg); }
    50% { transform: rotateY(180deg) rotateX(25deg); }
    100% { transform: rotateY(360deg) rotateX(0deg); }
}

.lym-toss-btn {
    display: block; width: 100%; height: 46px; border: none; border-radius: 23px;
    background: #111111; color: #FFFFFF; font-family: inherit;
    font-size: 13px; font-weight: 600; letter-spacing: 1px; cursor: pointer;
}
.lym-toss-btn:disabled { opacity: .45; cursor: default; }
.lym-reset-btn {
    display: block; margin: 9px auto 0; border: none; background: transparent;
    font-family: inherit; font-size: 10.5px; color: var(--accent-gold); cursor: pointer;
}
.lym-reset-btn:disabled { opacity: .35; cursor: default; }

/* 手工推演：名称+爻象下拉 */
.lym-spec-select {
    flex: 1; min-width: 0; height: 32px;
    border: 1px solid #EDE6DA; border-radius: 8px;
    background-color: #FFFFFF; color: var(--text-main);
    font-family: inherit; font-size: 11px; padding: 0 34px 0 10px;
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23999690' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 11px 7px;
    outline: none;
}
.lym-spec-select:focus { border-color: var(--accent-gold); }

/* 卦名选择页：底部栏固定在页面底部，卦格独立滚动 */
#page-liuyao-gua-select { padding-bottom: 0; }
#page-liuyao-gua-select.active { display: flex; flex-direction: column; }
#page-liuyao-gua-select .subpage-header,
#page-liuyao-gua-select .gua-select-tabs,
#page-liuyao-gua-select .gua-select-tip { flex-shrink: 0; }
#page-liuyao-gua-select .gua-grid {
    flex: 1; overflow-y: auto; padding: 0 16px 12px;
}
#page-liuyao-gua-select .gua-select-bottom {
    position: static; margin-top: 0; flex-shrink: 0;
    background: var(--bg-color);
}

/* 数字推演算法说明 */
.number-rules {
    margin-top: 10px; padding: 10px 12px;
    background: #FBF7EF; border: 1px solid #F0E7D8; border-radius: 10px;
    font-size: 9.5px; line-height: 1.7; color: var(--text-light);
}
.number-rules b { display: block; font-size: 10.5px; color: var(--text-sub); margin-bottom: 5px; }
.number-rules p { margin: 4px 0; }
.number-rules strong { color: var(--text-main); font-weight: 600; }
.number-rules small { display: block; margin-top: 5px; color: var(--accent-gold); font-size: 9px; }
.lym-number-preview {
    margin-top: 8px; padding: 8px 10px; border-radius: 8px;
    background: #FFFFFF; border: 1px dashed var(--border-color);
    font-size: 10px; line-height: 1.6; color: var(--text-light);
}
.lym-number-preview.ok { color: var(--accent-green); border-color: rgba(74,139,92,.28); background: rgba(74,139,92,.05); }

/* 硬币推演说明 */
.coin-method-intro {
    margin-bottom: 14px; padding: 11px 12px;
    background: #FBF7EF; border: 1px solid #F0E7D8; border-radius: 10px;
    font-size: 10px; line-height: 1.8; color: var(--text-light);
}
.coin-method-intro p + p { margin-top: 8px; }

/* 时间推演：公历 / 农历 */
.time-mode-tabs {
    display: flex; gap: 4px; padding: 3px; margin-bottom: 14px;
    background: #EFEBE3; border-radius: 10px;
}
.time-mode-btn {
    flex: 1; border: none; background: transparent; border-radius: 8px;
    padding: 8px 0; font-family: inherit; font-size: 12px; color: var(--text-sub);
    cursor: pointer;
}
.time-mode-btn.active { background: #FFFFFF; color: var(--text-main); font-weight: 700; box-shadow: var(--shadow-sm); }
.lunar-date-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lunar-field { display: flex; flex-direction: column; gap: 5px; }
.lunar-field.lunar-year { grid-column: 1 / -1; }
.lunar-field span { font-size: 10px; color: var(--text-light); }
.lunar-field select,
.lunar-field input {
    width: 100%; height: 40px; border: 1px solid var(--border-color); border-radius: 10px;
    background-color: #FFFFFF; color: var(--text-main); font-family: inherit; font-size: 12px;
    padding: 0 32px 0 10px; outline: none;
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23999690' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 11px 7px;
}
.lunar-field input[type="time"] { padding-right: 10px; background-image: none; }
.lunar-preview {
    margin-top: 12px; padding: 9px 11px; border-radius: 8px;
    background: #FFFFFF; border: 1px dashed var(--border-color);
    font-size: 10px; color: var(--text-light); line-height: 1.6;
}
.lunar-preview.ok { color: var(--accent-green); border-color: rgba(74,139,92,.28); background: rgba(74,139,92,.05); }

.lunar-date-grid .lunar-field:nth-child(4) { grid-column: 1 / -1; }