/* 号码测算·纯前端多体系：数理科技质感（深青+金），移动优先自适应，深浅色跟随系统。 */
.hm-h1 { font-family: var(--font-serif); }

/* 表单 */
.hm-types { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.hm-types label { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 7px 14px; border: 1px solid var(--c-line); border-radius: 999px; font-size: 14px; cursor: pointer; background: #fff; color: var(--c-ink-2); transition: .15s; }
.hm-types input { position: absolute; opacity: 0; width: 0; height: 0; }
.hm-types label:has(input:checked) { background: #123; color: #fff; border-color: #123; }
.hm-num-row { display: flex; gap: 10px; margin-bottom: 8px; }
.hm-num-row input { flex: 1; min-width: 0; padding: 12px 14px; border: 1px solid var(--c-line); border-radius: var(--radius); font-size: 16px; letter-spacing: 1px; background: #fff; color: var(--c-ink); }
.hm-num-row input:focus { outline: 0; border-color: #123; box-shadow: 0 0 0 3px rgba(18, 51, 64, .12); }
.hm-type-hint { font-size: 12px; color: var(--c-ink-3); background: #eef3f4; border-radius: 8px; padding: 8px 12px; margin: 0 0 10px; line-height: 1.7; }
.hm-opts { display: flex; flex-direction: column; gap: 9px; margin: 10px 0 4px; }
.hm-opt-row { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-size: 13px; color: var(--c-ink-2); }
.hm-opt-row > span:first-child { font-weight: 600; color: var(--c-ink); min-width: 66px; }
.hm-opts label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.hm-msg { min-height: 1em; margin: 8px 0 0; font-size: var(--t-sm); color: #c0392b; text-align: center; }

/* 结果卡 */
.hm-card { margin-top: 16px; padding: 20px 18px; border-radius: 14px; background: linear-gradient(180deg, #f6fafb, #eef4f5); border: 1px solid #d6e3e6; box-shadow: 0 6px 22px rgba(18, 51, 64, .08); }

/* 结论层 */
.hm-verdict { display: flex; gap: 16px; align-items: center; }
.hm-score-ring { flex: 0 0 108px; width: 108px; height: 108px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(closest-side, #fff 76%, transparent 77% 100%), conic-gradient(#1f8a5b calc(var(--s) * 1%), #dfe8ea 0); }
.hm-score-ring b { font-family: var(--font-serif); font-size: 2.1rem; line-height: 1; color: #123; }
.hm-score-ring small { font-size: 11px; color: var(--c-ink-3); margin-top: 2px; }
.hm-verdict-main { flex: 1; min-width: 0; }
.hm-grade { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 700; color: #123; }
.hm-oneliner { margin: 4px 0 8px; font-size: var(--t-sm); line-height: 1.7; color: var(--c-ink); }
.hm-used { font-size: 13px; color: var(--c-ink-2); }
.hm-used b { color: #123; letter-spacing: 1px; }
.hm-used small { color: var(--c-ink-3); }

/* 五等级徽章 */
.hm-lv { display: inline-block; font-size: 12px; border-radius: 999px; padding: 1px 10px; color: #fff; margin-left: 4px; }
.hm-lv.daji { background: #c0392b; } .hm-lv.ji { background: #1f8a5b; } .hm-lv.banji { background: #c79a3a; } .hm-lv.xiong { background: #6b7b86; } .hm-lv.daxiong { background: #333; }

/* 体系折叠 */
.hm-systems { margin-top: 14px; display: grid; gap: 8px; }
.hm-sys { border: 1px solid #dbe6e8; border-radius: 10px; background: rgba(255, 255, 255, .7); overflow: hidden; }
.hm-sys > summary { cursor: pointer; padding: 11px 14px; font-weight: 600; color: #123; list-style: none; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hm-sys > summary::-webkit-details-marker { display: none; }
.hm-sys > summary::after { content: '▾'; margin-left: auto; color: var(--c-ink-3); transition: .2s; }
.hm-sys[open] > summary::after { transform: rotate(180deg); }
.hm-tag-mini { font-size: 11px; background: #e3edef; color: #2b5561; border-radius: 999px; padding: 1px 8px; }
.hm-sys-bd { padding: 4px 14px 14px; font-size: var(--t-sm); line-height: 1.8; color: var(--c-ink); }
.hm-duan { font-family: var(--font-serif); color: #123; }
.hm-duan .num { color: #c0392b; font-size: 1.1em; }
.hm-note { font-size: 12px; color: var(--c-ink-3); margin: 6px 0 0; line-height: 1.7; }

/* 五行柱 */
.hm-wx-cols { display: flex; gap: 8px; align-items: flex-end; height: 90px; margin: 6px 0 10px; }
.hm-wx-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.hm-wx-bar { width: 60%; min-height: 6px; border-radius: 5px 5px 0 0; display: block; }
.wx-金 { background: #c9a227; } .wx-木 { background: #3a9d5d; } .wx-水 { background: #2b7fc4; } .wx-火 { background: #d9534f; } .wx-土 { background: #b07d3a; }
.hm-wx-col b { font-size: 13px; margin-top: 4px; color: var(--c-ink); }
.hm-wx-col small { font-size: 11px; color: var(--c-ink-3); }

/* 谐音 */
.hm-homo-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.hm-homo-d { display: inline-flex; align-items: baseline; gap: 3px; font-size: 12px; padding: 3px 9px; border-radius: 8px; background: #eef3f4; color: var(--c-ink-2); }
.hm-homo-d b { font-family: var(--font-serif); font-size: 15px; color: #123; }
.hm-homo-d.g { background: #e5f4ec; color: #1f7a4d; } .hm-homo-d.g b { color: #1f8a5b; }
.hm-homo-d.b { background: #fbeaea; color: #b6403c; } .hm-homo-d.b b { color: #c0392b; }
.hm-combos { display: flex; flex-wrap: wrap; gap: 6px; }
.hm-combo { font-size: 12px; background: #fff5df; color: #9a6d15; border: 1px solid #ecd9a6; border-radius: 999px; padding: 2px 10px; }

/* 磁场八星 */
.hm-mag-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.hm-mag { display: inline-flex; flex-direction: column; align-items: center; font-size: 11px; padding: 5px 10px; border-radius: 9px; min-width: 56px; }
.hm-mag.g { background: #e5f4ec; color: #1f7a4d; } .hm-mag.b { background: #fbeaea; color: #b6403c; }
.hm-mag b { font-family: var(--font-serif); font-size: 15px; }
.hm-mag small { font-size: 10px; opacity: .8; }

.hm-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 16px; }

/* 隐私声明 */
.hm-privacy { display: flex; gap: 12px; align-items: flex-start; margin: 16px 0; padding: 14px 16px; background: #eef4f8; border: 1px solid #cfe0ec; border-radius: 12px; }
.hm-privacy .ic { font-size: 22px; }
.hm-privacy p { margin: 0; font-size: var(--t-sm); line-height: 1.8; color: #2b5068; }
.hm-privacy b { color: #1c4763; }

/* 对比表 */
.hm-cmp-scroll { overflow-x: auto; }
.hm-cmp { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.hm-cmp th, .hm-cmp td { padding: 8px 10px; text-align: center; border-bottom: 1px solid var(--c-line); white-space: nowrap; }
.hm-cmp th { color: var(--c-ink-3); font-weight: 600; font-size: 12px; }
.hm-cmp td b { color: #123; font-size: 1.05rem; }
.hm-cmp-top { background: #fff7e6; }
.hm-cmp-del, .hm-hist-del { border: 0; background: none; color: var(--c-ink-3); font-size: 18px; line-height: 1; cursor: pointer; }
.hm-cmp-del:hover, .hm-hist-del:hover { color: #c0392b; }

/* 历史 */
.hm-hist-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.hm-hist-item { position: relative; }
.hm-hist-load { width: 100%; text-align: left; border: 1px solid var(--c-line); border-radius: 9px; background: #fff; padding: 8px 10px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.hm-hist-load:hover { border-color: #123; }
.hm-hist-load b { letter-spacing: 1px; color: #123; }
.hm-hist-load span { font-size: 12px; color: var(--c-ink-3); }
.hm-hist-del { position: absolute; top: 3px; right: 5px; }

/* 数理速查表（SEO） */
.hm-table { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.hm-trow { display: flex; gap: 8px; align-items: baseline; padding: 8px 10px; border: 1px solid var(--c-line); border-radius: 8px; background: #fbfdfd; font-size: 13px; }
.hm-trow .n { font-family: var(--font-serif); color: #c0392b; font-weight: 700; min-width: 30px; }
.hm-trow .s { color: var(--c-ink-2); }

/* 文化科普 */
.hm-culture .panel-bd p { line-height: 2; margin: 0 0 12px; }

@media (max-width: 520px) {
  .hm-verdict { gap: 12px; }
  .hm-score-ring { flex-basis: 92px; width: 92px; height: 92px; }
  .hm-score-ring b { font-size: 1.8rem; }
  .hm-table { grid-template-columns: 1fr; }
}

/* 深色模式 */
@media (prefers-color-scheme: dark) {
  :root[data-theme="dark"] .hm-card { background: #1a2428; border-color: #2c3a40; }
  :root[data-theme="dark"] .hm-sys { background: rgba(255, 255, 255, .04); }
}