/* 奇门遁甲样式：全部限定 #sys-qimen 作用域，避免与八字/六爻/紫微同名类互扰。
   干支五行色复用全局 --wood/--fire/--earth/--metal/--water 变量（styles.css）。 */

#sys-qimen .qm-form { margin-bottom: 16px; }
#sys-qimen .qm-row { display: flex; flex-wrap: wrap; gap: 10px; }
#sys-qimen .qm-num { width: 72px; }
#sys-qimen .qm-year-f { width: 96px; }
#sys-qimen .field label { display: block; font-size: 12px; color: #8a7a63; margin-bottom: 3px; }
#sys-qimen .field input { width: 100%; box-sizing: border-box; }
#sys-qimen .qm-opts { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin: 12px 0; }
#sys-qimen .qm-check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; white-space: nowrap; }
/* 全局 input{width:100%} 会在 iOS Safari 把 flex 里的勾选框拉伸→挤进文字，显式复位 */
#sys-qimen input[type="checkbox"] { width: auto; flex: 0 0 auto; margin: 0; }
#sys-qimen .qm-lng-f { display: inline-flex; align-items: center; gap: 6px; }
#sys-qimen .qm-lng-f label { margin: 0; }
#sys-qimen .qm-lng-f input { width: 76px; }
#sys-qimen .qm-go { display: flex; gap: 10px; justify-content: center; margin-top: 14px; }
#sys-qimen .qm-go button { font: inherit; font-size: 15px; font-weight: 600; border: 0; border-radius: 9px; padding: 11px 26px; cursor: pointer; }
#sys-qimen .qm-go .primary { background: var(--ink); color: var(--paper); letter-spacing: .1em; }
#sys-qimen .qm-go .ghost { background: transparent; border: 1px solid var(--line); color: var(--ink-soft); }

/* 排盘信息 */
#sys-qimen .qm-info .qm-ju { font-size: 20px; font-weight: 700; color: #7a1f1f; margin-bottom: 8px; }
#sys-qimen .qm-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: #6b5d47; }
#sys-qimen .qm-pillars { display: flex; gap: 18px; margin-top: 10px; }
#sys-qimen .qm-pillar { display: inline-flex; align-items: baseline; gap: 3px; font-size: 22px; font-weight: 600; }
#sys-qimen .qm-pillar b { font-size: 12px; font-weight: 400; color: #8a7a63; margin-right: 3px; align-self: center; }

/* 干支五行着色 */
#sys-qimen .qm-gan, #sys-qimen .qm-zhi { font-weight: 700; }
#sys-qimen .wood { color: var(--wood, #2e7d32); }
#sys-qimen .fire { color: var(--fire, #c62828); }
#sys-qimen .earth { color: var(--earth, #9e7d0a); }
#sys-qimen .metal { color: var(--metal, #616161); }
#sys-qimen .water { color: var(--water, #1565c0); }

/* 九宫格 */
#sys-qimen .qm-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  max-width: 640px; margin: 0 auto;
}
#sys-qimen .qm-cell {
  border: 1px solid #d8c9a8; border-radius: 8px; background: #fbf7ee;
  padding: 8px 9px; min-height: 118px; display: flex; flex-direction: column; gap: 5px;
}
#sys-qimen .qm-center { background: #f3ead6; align-items: center; justify-content: center; text-align: center; }
#sys-qimen .qm-head { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #6b5d47; }
#sys-qimen .qm-no { font-weight: 700; color: #7a1f1f; }
#sys-qimen .qm-gua { font-size: 14px; color: #3a2f1c; }
#sys-qimen .qm-fang { color: #a89572; }
#sys-qimen .qm-marks { margin-left: auto; display: inline-flex; gap: 3px; }
#sys-qimen .qm-mk { font-size: 11px; padding: 0 4px; border-radius: 3px; color: #fff; }
#sys-qimen .qm-mk.kong { background: #9c8a6a; }
#sys-qimen .qm-mk.po { background: #b5651d; }
#sys-qimen .qm-mk.ma { background: #2e6b6b; }

#sys-qimen .qm-row2 { display: flex; justify-content: space-between; align-items: baseline; }
#sys-qimen .qm-star { font-size: 15px; font-weight: 700; color: #3a2f1c; }
#sys-qimen .qm-shen { font-size: 13px; }
#sys-qimen .qm-shen.ji, #sys-qimen .qm-gate.ji { color: #2e7d32; }
#sys-qimen .qm-shen.xiong, #sys-qimen .qm-gate.xiong { color: #b23b3b; }

#sys-qimen .qm-plate { display: flex; justify-content: space-between; font-size: 13px; }
#sys-qimen .qm-plate i { font-style: normal; font-size: 10px; color: #a89572; margin-left: 2px; }
#sys-qimen .qm-center .qm-plate { gap: 14px; justify-content: center; font-size: 15px; }
#sys-qimen .qm-foot { display: flex; align-items: baseline; gap: 6px; margin-top: auto; font-size: 12px; }
#sys-qimen .qm-an { color: #8a7a63; }
#sys-qimen .qm-an .qm-gan { font-size: 13px; }
#sys-qimen .qm-gate { font-weight: 700; font-size: 13px; }
#sys-qimen .qm-zhis { margin-left: auto; font-size: 13px; }

#sys-qimen .qm-geju { margin-top: 3px; font-size: 11px; text-align: center; border-radius: 4px; padding: 1px 0; }
#sys-qimen .qm-geju.ji { color: #2e7d32; background: rgba(46,125,50,.09); }
#sys-qimen .qm-geju.xiong { color: #b23b3b; background: rgba(178,59,59,.09); }
#sys-qimen .qm-geju.zhong { color: #9e7d0a; background: rgba(158,125,10,.09); }
#sys-qimen .qm-wby { color: #b23b3b; font-weight: 700; }

#sys-qimen .qm-legend { max-width: 640px; margin: 12px auto 0; font-size: 12px; color: #8a7a63; text-align: center; }
#sys-qimen .qm-legend .qm-mk { margin: 0 2px; }
#sys-qimen .qm-legend b.ji { color: #2e7d32; } #sys-qimen .qm-legend b.xiong { color: #b23b3b; }

/* 核心要素 */
#sys-qimen .qm-core h3 { font-size: 15px; color: #7a1f1f; margin: 0 0 8px; }
#sys-qimen .qm-core-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px 14px; }
#sys-qimen .qm-kv { display: flex; gap: 8px; font-size: 13px; }
#sys-qimen .qm-kv .k { color: #8a7a63; min-width: 52px; }
#sys-qimen .qm-kv .v { color: #3a2f1c; font-weight: 600; }

#sys-qimen .qm-note-f { margin-top: 10px; }
#sys-qimen .qm-note-f input { width: 100%; max-width: 320px; box-sizing: border-box; }
#sys-qimen .qm-save-bar { margin-top: 12px; text-align: center; }

@media (max-width: 560px) {
  #sys-qimen .qm-cell { min-height: 104px; padding: 6px 7px; }
  #sys-qimen .qm-pillar { font-size: 18px; }
  /* 年月日时分等分挤一行（手机） */
  #sys-qimen .qm-row { flex-wrap: nowrap; gap: 6px; }
  #sys-qimen .qm-num { width: auto; flex: 1 1 0; min-width: 0; }
  #sys-qimen .qm-year-f { width: auto; flex: 1.4 1 0; min-width: 0; }
  #sys-qimen .qm-form input { padding-left: 6px; padding-right: 6px; }
}