/* ============================================================================
 * 伏戎域 · XSA 象数排盘模块样式（#xsaApp 命名空间，全局通配行随集迁移）
 * 来源：从 伏戎域.html 内联 <style> 抽离；主页面 <head> 通过 link 引入。
 * 加载：普通外链 CSS，无构建步骤；缓存版本号在主页面 link 标签 ?v= 控制。
 * 回滚：删除主页面 link 标签、把本段样式贴回内联 <style> 即可。
 * ============================================================================ */

/* === XSA象数排盘样式 === */

        * { margin: 0; padding: 0; box-sizing: border-box; }
        #xsaApp { font-family: "Microsoft YaHei", "SimSun", serif; background: #f5f5f5; color: #333; padding: 16px; font-size: 13px; line-height: 1.5; }
        #xsaApp .container { max-width: 860px; margin: 0 auto; background: white; padding: 16px 22px; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
        #xsaApp h1 { text-align: center; color: #c0392b; margin-bottom: 14px; font-size: 18px; }
        #xsaApp .input-row { margin-bottom: 10px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
        #xsaApp .input-row label { min-width: 70px; color: #555; font-size: 13px; }
        #xsaApp select, #xsaApp input { padding: 5px 10px; border: 1px solid #ddd; border-radius: 3px; font-size: 13px; }
        #xsaApp button { padding: 7px 18px; background: #c0392b; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 13px; }
        #xsaApp button:hover { background: #e74c3c; }
        #xsaApp .xsa-tabs { display: flex; gap: 8px; margin-bottom: 14px; align-items: center; flex-wrap: wrap; }
        #xsaApp .xsa-tab { padding: 6px 14px; background: #eee; border-radius: 3px; cursor: pointer; font-size: 13px; }
        #xsaApp .xsa-tab.active { background: #c0392b; color: white; }
        #xsaApp .xsa-tab-content { display: none; }
        #xsaApp .xsa-tab-content.active { display: block; }

        #xsaApp .ganzhi-info { text-align: center; margin: 14px 0; font-size: 14px; color: #555; }
        #xsaApp .ganzhi-info span { color: #c0392b; font-weight: bold; }
        #xsaApp .ganzhi-info .kong { color: #e67e22; }

        #xsaApp .gua-header { text-align: center; margin: 8px 0 4px 0; font-size: 15px; display: flex; justify-content: center; align-items: baseline; gap: 6px; flex-wrap: nowrap; }
        #xsaApp .gua-header .gua-main { color: #c0392b; font-weight: bold; }
        #xsaApp .gua-header .gua-bian { color: #2980b9; font-weight: bold; }
        #xsaApp .gua-header .gua-gong { color: #666; font-size: 13px; }

        #xsaApp .gua-table { width: 100%; border-collapse: collapse; margin: 4px auto 12px auto; table-layout: fixed; max-width: 720px; }
        #xsaApp .gua-table col.c1 { width: 7%; }
        #xsaApp .gua-table col.c2 { width: 12%; }
        #xsaApp .gua-table col.c3 { width: 30%; }
        #xsaApp .gua-table col.c4 { width: 12%; }
        #xsaApp .gua-table col.c5 { width: 30%; }
        #xsaApp .gua-table td { padding: 7px 5px; border-bottom: 1px solid #eee; vertical-align: middle; font-size: 13px; }
        #xsaApp .shenshen { width: 60px; font-size: 13px; color: #333; text-align: center; }

        #xsaApp .yao-cell { width: 90px; height: 18px; display: flex; align-items: center; justify-content: center; }
        #xsaApp .yao { width: 64px; height: 3px; display: flex; justify-content: space-between; }
        #xsaApp .yao-yang .bar { width: 100%; height: 3px; background: #333; }
        #xsaApp .yao-yin .bar { width: 30px; height: 3px; background: #333; }
        #xsaApp .yao-yang.yao-dong .bar { background: #e74c3c; }
        #xsaApp .yao-yin.yao-dong .bar { background: #e74c3c; }

        #xsaApp .yao-text { font-size: 13px; }
        #xsaApp .yao-liuyuan { font-weight: bold; color: #2c3e50; }

        #xsaApp .price-type-group { display: flex; gap: 4px; align-items: center; }
        #xsaApp .price-type-btn { padding: 4px 10px; background: #eee; border: 1px solid #ddd; border-radius: 3px; cursor: pointer; font-size: 12px; }
        #xsaApp .price-type-btn.active { background: #c0392b; color: white; border-color: #c0392b; }

        #xsaApp .guaci-panel { margin-top: 18px; padding: 16px; background: #f8f9fa; border-radius: 4px; display: none; }
        #xsaApp .guaci-panel h3 { margin-bottom: 10px; color: #c0392b; font-size: 14px; }
        #xsaApp .guaci-panel .yao-ci { margin-bottom: 4px; font-size: 13px; line-height: 1.5; }
        #xsaApp .guaci-panel .yao-baihua { margin-bottom: 10px; font-size: 12px; line-height: 1.5; color: #666; padding-left: 12px; }
        #xsaApp .guaci-toggle { text-align: center; margin-top: 16px; }
        #xsaApp .guaci-toggle button { background: #666; }