/**
 * 手动起卦与占事选择模块（module-manual-and-matter.css）
 * - 包含手动起卦爻槽、选爻浮层、占事事项槽与两级选择弹层样式。
 * - 仅覆盖 manual / matter 相关选择器，不含结果区与解卦区样式。
 * - 建议在 component-buttons.css 之后、style.css 之前加载。
 */
.hint {
    margin-top: 20px;
    color: #666;
    font-size: 14px;
}

.manual-section {
    padding: 10px 0;
}

/* 手动起卦：爻槽列表（上爻在上，初爻在下） */
.manual-yaos {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 288px;
    margin-left: auto;
    margin-right: auto;
}

.manual-yao-slot {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 18px;
    color: #666;
    transition: all 0.2s;
}

.manual-yao-slot:hover {
    border-color: #2f6b52;
    background: rgba(47, 107, 82, 0.08);
    color: #2f6b52;
}

.manual-yao-slot.filled {
    background: #fff;
}

.manual-yao-slot.filled img {
    width: 100%;
    height: 40px;
    object-fit: contain;
    object-position: center;
    display: block;
}

/* 平板 / 电脑：爻槽略缩小；<768px 保持原尺寸（手机） */
@media (min-width: 768px) {
    .manual-yaos {
        width: 244px;
        gap: 10px;
    }

    .manual-yao-slot {
        min-height: 40px;
        font-size: 16px;
        border-radius: 8px;
    }

    .manual-yao-slot.filled img {
        height: 34px;
    }
}

/* 手动起卦：选爻悬浮层 */
.manual-yao-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.manual-yao-overlay-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}

.manual-yao-overlay-box {
    position: relative;
    background: #fff;
    border-radius: 12px;
    padding: 20px 24px 24px;
    max-width: 400px;
    width: 100%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.manual-yao-overlay-title {
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    text-align: center;
}

.manual-yao-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.manual-yao-option {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    margin: 0;
    padding: 14px 18px;
    border: 2px solid #e8e8e8;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    font: inherit;
    text-align: left;
    background: #fff;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    color: inherit;
}

.manual-yao-option:hover {
    border-color: #2f6b52;
    background: rgba(47, 107, 82, 0.06);
}

.manual-yao-option:focus-visible {
    outline: 2px solid #2f6b52;
    outline-offset: 2px;
}

.manual-yao-option img {
    width: 160px;
    height: auto;
    flex-shrink: 0;
}

.manual-yao-option span {
    font-size: 20px;
    font-weight: 600;
    color: #333;
}

/* 占事事项槽 + 两级选择悬浮层 */
.liuyao-matter-slot {
    display: inline-block;
    width: auto;
    max-width: 200px;
    min-width: 88px;
    margin: 0 auto;
    padding: 7px 22px;
    text-align: center;
    box-sizing: border-box;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #4338ca;
    background: linear-gradient(165deg, #fafbff 0%, #e8ecff 38%, #d4dcfa 100%);
    border: 1px solid #a5b4fc;
    border-radius: 999px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 1px 2px rgba(255, 255, 255, 0.6) inset,
        0 5px 12px rgba(99, 102, 241, 0.22),
        0 2px 4px rgba(15, 23, 42, 0.12);
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.liuyao-matter-slot:hover {
    color: #3730a3;
    background: linear-gradient(165deg, #ffffff 0%, #eef1ff 40%, #dce3fc 100%);
    border-color: #818cf8;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 1) inset,
        0 1px 3px rgba(255, 255, 255, 0.7) inset,
        0 7px 16px rgba(99, 102, 241, 0.28),
        0 3px 6px rgba(15, 23, 42, 0.1);
}

.liuyao-matter-slot:active {
    transform: translateY(1px);
    box-shadow:
        0 1px 1px rgba(255, 255, 255, 0.5) inset,
        0 2px 6px rgba(99, 102, 241, 0.18),
        0 1px 2px rgba(15, 23, 42, 0.1);
}

.liuyao-matter-overlay {
    position: fixed;
    inset: 0;
    z-index: 1001;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

/* 临时：仅保留「所问事项」输入与「确定」；去掉「或选择事项分类」与八个分类按钮。恢复：删 index 上 liuyao-matter-overlay--simple */
.liuyao-matter-overlay--simple .liuyao-matter-heading--after-manual,
.liuyao-matter-overlay--simple #liuyao-matter-cat-list {
    display: none !important;
}

.liuyao-matter-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.liuyao-matter-box {
    position: relative;
    background: #fff;
    border-radius: 16px;
    max-width: min(96vw, 540px);
    width: 100%;
    max-height: min(85vh, 620px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.liuyao-matter-panel {
    padding: 20px 20px 22px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: 0;
}

.liuyao-matter-heading {
    margin: 0 0 14px;
    font-size: 17px;
    font-weight: 600;
    color: #1e293b;
    text-align: center;
}

.liuyao-matter-heading--after-manual {
    margin: 6px 0 12px;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    letter-spacing: 0.04em;
}

.liuyao-matter-cat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
}

/* 四字分类：两段两字 nowrap；默认横排四字。
   容器查询量比的是按钮「内容盒」inline 宽度。占事浮层 max 约 540px、四列表格下单格内容区常在 ~95–110px，
   若阈值用固定 px（如 106px）会与「一行能否排下四字」脱钩，几乎总判为窄 → 电脑上仍强制 2+2。
   改用 em：相对本按钮 font-size，表示「内容区窄于约四字可视宽」时才纵排；随字号/缩放变化，宽格易获一行四字。 */
.liuyao-matter-cat-btn {
    container-type: inline-size;
    container-name: liuyao-matter-cat;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px 5px;
    min-height: 58px;
    border: 1px solid #e2e8f0;
    border-radius: 11px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.22;
    color: #334155;
    cursor: pointer;
    text-align: center;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 1px 3px rgba(15, 23, 42, 0.06);
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.1s ease, color 0.15s ease;
}

.liuyao-matter-cat-btn-inner {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    column-gap: 0;
    row-gap: 0;
    max-width: 100%;
}

@container liuyao-matter-cat (max-width: 4.35em) {
    .liuyao-matter-cat-btn-inner {
        flex-direction: column;
        row-gap: 4px;
    }
}

.liuyao-matter-cat-btn-line {
    display: inline-block;
    white-space: nowrap;
    line-height: 1.18;
    letter-spacing: 0.02em;
}

/* 不支持容器查询：用视宽近似（窄屏多为窄格） */
@supports not (container-type: inline-size) {
    @media (max-width: 440px) {
        .liuyao-matter-cat-btn-inner {
            flex-direction: column;
            row-gap: 4px;
        }
    }
}

.liuyao-matter-cat-btn:hover {
    border-color: #2f6b52;
    background: linear-gradient(180deg, #f0fdf4 0%, #ecfdf5 100%);
    color: #14532d;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 1) inset, 0 2px 8px rgba(47, 107, 82, 0.18);
}

.liuyao-matter-cat-btn:active {
    transform: scale(0.98);
}

.liuyao-matter-cat-btn:focus-visible {
    outline: 2px solid #2f6b52;
    outline-offset: 2px;
}

/* 二级事项：首行左侧返回胶囊 + 居中分类标题 */
.liuyao-matter-level2-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    margin: 0 0 12px;
    padding: 0 2px;
}

.liuyao-matter-back-pill {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    padding: 7px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #f8fafc;
    color: #334155;
    font-size: 14px;
    cursor: pointer;
    text-align: center;
    line-height: 1.25;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.liuyao-matter-back-pill:hover {
    border-color: #2f6b52;
    background: #f0fdf4;
    color: #14532d;
}

.liuyao-matter-back-pill:focus-visible {
    outline: 2px solid #2f6b52;
    outline-offset: 2px;
}

.liuyao-matter-level2-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    text-align: center;
    line-height: 1.35;
    padding: 0 76px;
    max-width: 100%;
    box-sizing: border-box;
}

/* 与学易笔记 .notes-entry-list 相同：按文字实际宽度换行排列 */
.liuyao-matter-opt-list {
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: flex-start;
    gap: 10px 12px;
    padding: 4px 0 8px;
    max-height: min(60vh, 420px);
    -webkit-overflow-scrolling: touch;
}

.liuyao-matter-opt-btn {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
    padding: 8px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    font-size: 13px;
    color: #334155;
    text-align: center;
    cursor: pointer;
    line-height: 1.4;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 2px 4px rgba(15, 23, 42, 0.06);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, transform 0.1s ease;
    box-sizing: border-box;
    white-space: normal;
}

.liuyao-matter-opt-btn:hover {
    border-color: #818cf8;
    background: linear-gradient(180deg, #ffffff 0%, #f1f4ff 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 1) inset, 0 3px 8px rgba(99, 102, 241, 0.15);
}

.liuyao-matter-opt-btn:active {
    transform: scale(0.98);
}

/* 置于选项列表最末，弱化样式（不高亮为「主操作」） */
.liuyao-matter-clear-btn {
    flex: 0 0 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 10px 4px;
    margin-top: 4px;
    border: none;
    border-top: 1px solid #f1f5f9;
    border-radius: 0;
    background: transparent;
    font-size: 12px;
    color: #94a3b8;
    cursor: pointer;
    text-align: center;
    line-height: 1.4;
    transition: color 0.15s ease, background 0.15s ease;
}

.liuyao-matter-clear-btn:hover {
    color: #64748b;
    background: #fafafa;
    border-radius: 6px;
}

.liuyao-matter-clear-btn:focus-visible {
    outline: 2px solid #ef4444;
    outline-offset: 2px;
}

.liuyao-matter-manual-input {
    margin-top: 10px;
    padding-top: 10px;
}

.liuyao-matter-manual-input--top {
    margin-top: 0;
    padding: 0 0 16px;
    margin-bottom: 6px;
    border-bottom: 1px solid #f1f5f9;
}

/* 「所问事项」标题：居中、大字重、底部分割装饰 */
.liuyao-matter-manual-label {
    display: block;
    margin: 0 auto 14px;
    max-width: 100%;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: 0.14em;
    line-height: 1.35;
    padding-bottom: 4px;
    position: relative;
}

.liuyao-matter-manual-label::after {
    content: '';
    display: block;
    margin: 12px auto 0;
    width: min(200px, 72%);
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent 0%, rgba(47, 107, 82, 0.25) 20%, #2f6b52 50%, rgba(47, 107, 82, 0.25) 80%, transparent 100%);
    box-shadow: 0 1px 2px rgba(47, 107, 82, 0.15);
}

.liuyao-matter-manual-heading {
    margin-bottom: 10px;
    font-size: 14px;
    color: #666;
}

.liuyao-matter-manual-input-field {
    width: 100%;
    box-sizing: border-box;
    padding: 15px 17px;
    margin-bottom: 14px;
    border: 1.5px solid #cbd5e1;
    border-radius: 13px;
    font-size: 15px;
    line-height: 1.45;
    color: #0f172a;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) inset;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.liuyao-matter-manual-input-field::placeholder {
    color: #94a3b8;
    font-size: 14px;
}

.liuyao-matter-manual-input-field:hover {
    border-color: #94a3b8;
}

.liuyao-matter-manual-input-field:focus {
    outline: none;
    border-color: #2f6b52;
    background: #fff;
    box-shadow:
        0 0 0 3px rgba(47, 107, 82, 0.2),
        0 1px 2px rgba(15, 23, 42, 0.06) inset;
}

.liuyao-matter-client-gender {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px;
    padding: 11px 14px;
    border-radius: 13px;
    border: 1px solid #e2e8f0;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) inset;
}

.liuyao-matter-client-gender__label {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    letter-spacing: 0.06em;
}

.liuyao-matter-client-gender__opts {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.liuyao-matter-gender-btn {
    min-width: 52px;
    padding: 7px 16px;
    border: 1.5px solid #cbd5e1;
    border-radius: 999px;
    background: #fff;
    color: #64748b;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, transform 0.1s ease;
    -webkit-tap-highlight-color: transparent;
}

.liuyao-matter-gender-btn:hover:not(.is-selected) {
    border-color: #94a3b8;
    color: #334155;
    background: #f8fafc;
}

.liuyao-matter-gender-btn:active:not(:disabled) {
    transform: translateY(1px);
}

.liuyao-matter-gender-btn:focus-visible {
    outline: 2px solid #2f6b52;
    outline-offset: 2px;
}

.liuyao-matter-gender-btn.is-selected {
    border-color: #2f6b52;
    color: #fff;
    background: linear-gradient(165deg, #3d8f5f 0%, #2f6b52 45%, #256346 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.25) inset,
        0 2px 8px rgba(47, 107, 82, 0.28);
}

.liuyao-matter-gender-btn.is-selected:hover {
    filter: brightness(1.04);
}

/* 「确定」字号随屏宽加大，与预设按钮分层一致 */
.liuyao-matter-manual-confirm-btn {
    width: 100%;
    padding: 13px 18px;
    border: none;
    border-radius: 13px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(165deg, #3d8f5f 0%, #2f6b52 45%, #256346 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.25) inset,
        0 4px 14px rgba(47, 107, 82, 0.35),
        0 2px 4px rgba(15, 23, 42, 0.12);
    transition: transform 0.12s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.liuyao-matter-manual-confirm-btn:hover {
    filter: brightness(1.05);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.3) inset,
        0 6px 18px rgba(47, 107, 82, 0.4),
        0 3px 6px rgba(15, 23, 42, 0.14);
}

.liuyao-matter-manual-confirm-btn:active {
    transform: translateY(1px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.2) inset,
        0 2px 8px rgba(47, 107, 82, 0.28);
}

.liuyao-matter-manual-confirm-btn:focus-visible {
    outline: 2px solid #14532d;
    outline-offset: 3px;
}

/* ---------- 占事浮层：按设备逐级加大字号与触控高度 ---------- */

@media (min-width: 360px) {
    .liuyao-matter-manual-label {
        font-size: 19px;
        letter-spacing: 0.16em;
    }

    .liuyao-matter-manual-input-field {
        font-size: 16px;
        padding: 16px 18px;
    }

    .liuyao-matter-manual-input-field::placeholder {
        font-size: 15px;
    }

    .liuyao-matter-manual-confirm-btn {
        font-size: 15px;
        padding: 14px 20px;
    }

    .liuyao-matter-heading--after-manual {
        font-size: 15px;
    }

    .liuyao-matter-cat-btn {
        font-size: 14px;
        min-height: 60px;
        padding: 10px 6px;
    }

    .liuyao-matter-opt-btn {
        font-size: 14px;
        min-height: 42px;
        padding: 9px 15px;
    }

    .liuyao-matter-back-pill {
        font-size: 14px;
        padding: 8px 15px;
    }

    .liuyao-matter-level2-title {
        font-size: 17px;
    }
}

@media (min-width: 400px) {
    .liuyao-matter-manual-label {
        font-size: 20px;
    }

    .liuyao-matter-manual-input-field {
        font-size: 17px;
    }

    .liuyao-matter-manual-input-field::placeholder {
        font-size: 15px;
    }

    .liuyao-matter-manual-confirm-btn {
        font-size: 16px;
        padding: 15px 22px;
    }

    .liuyao-matter-heading--after-manual {
        font-size: 16px;
    }

    .liuyao-matter-cat-btn {
        font-size: 13px;
        min-height: 58px;
        padding: 10px 7px;
        line-height: 1.25;
    }

    .liuyao-matter-cat-grid {
        gap: 10px;
    }

    .liuyao-matter-opt-btn {
        font-size: 14px;
        padding: 10px 16px;
    }

    .liuyao-matter-clear-btn {
        font-size: 13px;
    }
}

@media (min-width: 480px) {
    .liuyao-matter-panel {
        padding: 22px 22px 24px;
    }

    .liuyao-matter-manual-label {
        font-size: 21px;
        margin-bottom: 16px;
    }

    .liuyao-matter-manual-label::after {
        margin-top: 14px;
        height: 3px;
        width: min(220px, 75%);
    }

    .liuyao-matter-manual-input-field {
        font-size: 17px;
        padding: 17px 19px;
        margin-bottom: 15px;
    }

    .liuyao-matter-manual-confirm-btn {
        font-size: 17px;
        padding: 16px 22px;
    }

    .liuyao-matter-heading--after-manual {
        font-size: 16px;
        margin: 8px 0 14px;
    }

    .liuyao-matter-cat-btn {
        font-size: 13px;
        min-height: 60px;
        border-radius: 12px;
    }

    .liuyao-matter-opt-btn {
        font-size: 15px;
        min-height: 44px;
    }

    .liuyao-matter-back-pill {
        font-size: 15px;
    }

    .liuyao-matter-level2-title {
        font-size: 18px;
    }
}

@media (min-width: 600px) {
    .liuyao-matter-manual-label {
        font-size: 22px;
        letter-spacing: 0.18em;
    }

    .liuyao-matter-manual-label::after {
        margin-top: 14px;
        height: 4px;
    }

    .liuyao-matter-manual-input-field {
        font-size: 18px;
    }

    .liuyao-matter-manual-input-field::placeholder {
        font-size: 16px;
    }

    .liuyao-matter-manual-confirm-btn {
        font-size: 18px;
        padding: 17px 24px;
    }

    .liuyao-matter-cat-btn {
        font-size: 18px;
        min-height: 62px;
        padding: 11px 8px;
    }

    .liuyao-matter-opt-btn {
        font-size: 15px;
        padding: 10px 17px;
    }
}

/* 极窄屏：略收紧格子（容器查询仍会决定是否两字纵排） */
@media (max-width: 359px) {
    .liuyao-matter-cat-grid {
        gap: 7px;
    }

    .liuyao-matter-cat-btn {
        font-size: 12px;
        padding: 8px 4px;
        min-height: 54px;
    }
}