/* meihao 紫微斗數 — 樣式（依參考設計重製：深底 + 單一橙色強調） */

.mhz-app { --mhz-bg:#f5f6f8; --mhz-card:#ffffff; --mhz-card-alt:#f0f2f5; --mhz-text:#1a1d2b;
  --mhz-orange:#d4700a; --mhz-orange-dim:#b8873a; --mhz-muted:#6b7280; --mhz-line:#d1d5db; --mhz-red:#c8463c; --mhz-azure:#3b5fc7;
  font-family: -apple-system, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  color: var(--mhz-text); background: var(--mhz-bg); }
.mhz-app * { box-sizing: border-box; }

/* ---- 表單卡片 ---- */
.mhz-form-card { background: var(--mhz-card); border: 1px solid var(--mhz-line); border-radius: 14px; padding: 1.5rem; max-width: 460px; margin: 0 auto 1.5rem; }
.mhz-form-title { font-size: 1.3rem; font-weight: 700; text-align: center; margin-bottom: .4rem; }
.mhz-form-subtitle { font-size: .8rem; color: var(--mhz-muted); text-align: center; margin-bottom: 1.25rem; line-height: 1.5; }
.mhz-field { display: block; margin-bottom: 1rem; }
.mhz-field__label { display: block; font-size: .8rem; color: var(--mhz-muted); margin-bottom: .4rem; }
.mhz-field select, .mhz-field input[type=date] { width: 100%; background: var(--mhz-bg); border: 1px solid var(--mhz-line); color: var(--mhz-text);
  padding: .6rem .7rem; border-radius: 8px; font-size: .95rem; }
.mhz-field select:focus, .mhz-field input:focus { outline: 2px solid var(--mhz-orange); }

/* 性別 / 安星算法：左右兩大顆切換按鈕 */
.mhz-seg { display: flex; gap: .5rem; }
.mhz-seg__btn { flex: 1; background: var(--mhz-bg); border: 1px solid var(--mhz-line); color: var(--mhz-text);
  padding: .6rem .5rem; border-radius: 8px; cursor: pointer; font-size: .88rem; }
.mhz-seg__btn--active { background: var(--mhz-orange); border-color: var(--mhz-orange); color: #1a1305; font-weight: 700; }

/* 進階設定 */
.mhz-advanced { margin-bottom: 1rem; border: 1px solid var(--mhz-line); border-radius: 10px; padding: .6rem .8rem; }
.mhz-advanced summary { cursor: pointer; color: var(--mhz-orange); font-size: .85rem; padding: .3rem 0; }
.mhz-advanced__body { margin-top: .6rem; display: flex; flex-direction: column; gap: .7rem; }
.mhz-toggle-row { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: .8rem; color: var(--mhz-muted); }
.mhz-toggle { display: flex; gap: .3rem; }
.mhz-toggle__btn { background: var(--mhz-bg); border: 1px solid var(--mhz-line); color: var(--mhz-text);
  padding: .35rem .6rem; border-radius: 6px; cursor: pointer; font-size: .78rem; }
.mhz-toggle__btn--active { background: var(--mhz-orange); border-color: var(--mhz-orange); color: #1a1305; }

.mhz-btn { background: var(--mhz-orange); color: #1a1305; border: none; padding: .7rem 1.4rem;
  border-radius: 8px; font-weight: 700; cursor: pointer; font-size: .95rem; }
.mhz-btn:hover { filter: brightness(1.08); }
.mhz-btn--block { width: 100%; }
.mhz-btn--ghost { background: transparent; border: 1px solid var(--mhz-line); color: var(--mhz-text); }
.mhz-error { color: var(--mhz-red); font-size: .82rem; margin-bottom: .75rem; }

/* ---- 狀態列 / 分頁籤 / 操作列 ---- */
.mhz-statusbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .4rem;
  background: var(--mhz-card-alt); border-radius: 8px; padding: .55rem .9rem; font-size: .8rem; margin-bottom: .75rem; }
.mhz-statusbar__hint { color: var(--mhz-muted); font-size: .72rem; }
.mhz-tabs { display: flex; gap: .5rem; margin-bottom: .6rem; border-bottom: 1px solid var(--mhz-line); }
.mhz-tab { background: none; border: none; color: var(--mhz-muted); padding: .5rem 1rem; cursor: pointer; font-size: .9rem; border-bottom: 2px solid transparent; }
.mhz-tab--active { color: var(--mhz-orange); border-bottom-color: var(--mhz-orange); }
.mhz-actionbar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: .9rem; }
.mhz-select { background: var(--mhz-card-alt); border: 1px solid var(--mhz-line); color: var(--mhz-text); padding: .6rem .7rem; border-radius: 8px; flex: 1; min-width: 220px; font-size: .85rem; }

/* ---- 十二宮方盤 ---- */
.mhz-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); grid-template-rows: repeat(4, auto);
  gap: 4px; background: var(--mhz-line); border: 1px solid var(--mhz-line); border-radius: 8px; overflow: hidden; }
.mhz-cell { background: var(--mhz-card); padding: .65rem .7rem; min-height: 195px; position: relative; display: flex; flex-direction: column; gap: .35rem; font-size: .86rem; border: 1px solid var(--mhz-line); }
.mhz-cell--minggong { box-shadow: inset 0 0 0 2px var(--mhz-orange); }
.mhz-cell--overlay-daxian { background: #f0faf4; box-shadow: inset 0 0 0 2px #2e9e5b; }
.mhz-cell--overlay-liunian { box-shadow: inset 0 0 0 2px #3b5fc7; }
.mhz-cell--overlay-daxian.mhz-cell--overlay-liunian { background: #f0faf4; box-shadow: inset 0 0 0 2px #2e9e5b, inset 0 0 0 4px #3b5fc7; }
.mhz-dot { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--mhz-orange); }
.mhz-cell__stars-main { display: flex; flex-wrap: wrap; gap: .35rem .45rem; }
.mhz-star--main { color: var(--mhz-text); font-weight: 700; font-size: 1rem; }
.mhz-cell__stars-aux { display: flex; flex-wrap: wrap; gap: .3rem .4rem; }
.mhz-star--aux { color: var(--mhz-azure); font-size: .8rem; }
.mhz-cell__stars-misc { color: var(--mhz-muted); display: flex; flex-wrap: wrap; gap: .25rem .35rem; font-size: .74rem; }
.mhz-empty { color: var(--mhz-muted); font-size: .82rem; }
.mhz-bright { color: var(--mhz-muted); font-size: .68rem; margin-left: 1px; }
.mhz-hua { margin-left: 1px; padding: 0 3px; border-radius: 3px; font-size: .68rem; color: #fff; }
.mhz-hua--natal { background: var(--mhz-red); }
.mhz-hua--daxian { background: #2e9e5b; }
.mhz-hua--liunian { background: #1a7fc4; }
.mhz-daxian-label { color: #2e9e5b; font-weight: 700; margin-right: .2rem; }
.mhz-liunian-label { color: #6c8cf0; font-weight: 700; margin-right: .2rem; }
.mhz-seal--overlay { border-color: #2e9e5b; color: #2e9e5b; }
.mhz-seal--liunian { border-color: #3b5fc7; color: #3b5fc7; }
.mhz-seal--xiaoxian { border-color: #7c3aed; color: #7c3aed; }

/* ---- 流年附加星曜 ---- */
.mhz-cell__liunian-stars { display: flex; flex-wrap: wrap; gap: .2rem .35rem; border-top: 1px dashed #c7d2fe; padding-top: .25rem; margin-top: .1rem; }
.mhz-star--liuyao   { color: #3b5fc7; font-size: .8rem; }
.mhz-star--suiqian  { color: #b45309; font-size: .76rem; }
.mhz-star--jiangqian { color: #0f766e; font-size: .76rem; }
.mhz-star--nianjie  { color: #7c3aed; font-size: .76rem; }
.mhz-cell--overlay-xiaoxian { box-shadow: inset 0 0 0 2px #7c3aed; }
.mhz-cell--overlay-daxian.mhz-cell--overlay-xiaoxian { box-shadow: inset 0 0 0 2px #2e9e5b, inset 0 0 0 4px #7c3aed; }
.mhz-cell--overlay-liunian.mhz-cell--overlay-xiaoxian { box-shadow: inset 0 0 0 2px #3b5fc7, inset 0 0 0 4px #7c3aed; }

/* ---- 流年選單標籤顏色同步更新 ---- */
.mhz-actionbar__selects { display: flex; gap: .5rem; flex: 1; min-width: 0; flex-wrap: wrap; }
.mhz-select-group { display: flex; align-items: center; gap: .35rem; flex: 1; min-width: 120px; }
.mhz-select-label { font-size: .78rem; font-weight: 700; white-space: nowrap; padding: .35rem .55rem; border-radius: 6px; }
.mhz-select-label--daxian { background: #2e9e5b22; color: #2e9e5b; border: 1px solid #2e9e5b55; }
.mhz-select-label--liunian { background: #3b5fc722; color: #3b5fc7; border: 1px solid #3b5fc755; }
.mhz-cell__age { margin-top: auto; color: var(--mhz-muted); font-size: .78rem; text-align: center; border-top: 1px dashed var(--mhz-line); padding-top: .25rem; }
.mhz-cell__shens { display: flex; justify-content: space-between; color: var(--mhz-muted); font-size: .75rem; }
.mhz-cell__bottom { display: flex; justify-content: space-between; align-items: center; font-size: .86rem; border-top: 1px solid var(--mhz-line); padding-top: .3rem; flex-wrap: wrap; gap: .2rem; }
.mhz-cell__name { font-weight: 700; display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.mhz-cell__ganzhi { color: var(--mhz-muted); letter-spacing: .04em; }
.mhz-seal { font-style: normal; font-size: .68rem; border: 1px solid var(--mhz-orange); color: var(--mhz-orange); border-radius: 3px; padding: 0 4px; line-height: 1.4; }
.mhz-seal--alt { border-color: var(--mhz-azure); color: var(--mhz-azure); }
.mhz-seal--overlay { border-color: #2e9e5b; color: #2e9e5b; } /* 大限疊圖標記，inline顯示在宮名旁，不擋住任何文字，且只會出現在該大限命宮這一格 */

/* ---- 整體放大：結果區與方盤可用更寬的版面 ---- */
.mhz-result { max-width: 1280px; margin: 0 auto; }

/* ---- 中央資訊區 ---- */
.mhz-center { justify-content: flex-start; gap: .45rem; overflow-y: auto; }
.mhz-center__head { display: flex; align-items: baseline; gap: .4rem; margin-bottom: .15rem; }
.mhz-center__gender { color: var(--mhz-orange); font-weight: 700; }
.mhz-center__title { font-weight: 700; flex: 1; font-size: 1.05rem; }
.mhz-center__ju { background: var(--mhz-card-alt); border: 1px solid var(--mhz-line); border-radius: 6px; padding: .15rem .5rem; font-size: .8rem; color: var(--mhz-orange-dim); }
.mhz-center__box { background: var(--mhz-card-alt); border-radius: 6px; padding: .4rem .6rem; display: flex; justify-content: space-between; font-size: .82rem; }
.mhz-center__boxlabel { color: var(--mhz-muted); }
.mhz-center__boxval { color: var(--mhz-text); }
.mhz-center__row2col { display: flex; justify-content: space-between; font-size: .82rem; }
.mhz-center__label { color: var(--mhz-muted); margin-right: .3rem; }
.mhz-center__value { color: var(--mhz-text); }
.mhz-center__controls { display: flex; flex-direction: column; gap: .4rem; margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--mhz-line); }
.mhz-select--sm { font-size: .78rem; padding: .35rem .5rem; }
.mhz-bazi { display: flex; justify-content: space-between; text-align: center; }
.mhz-bazi__col { flex: 1; }
.mhz-bazi__label { color: var(--mhz-muted); font-size: .7rem; }
.mhz-bazi__val { font-weight: 700; font-size: .94rem; }

/* ---- 資料表 ---- */
.mhz-table-wrap { overflow-x: auto; }
.mhz-palace-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.mhz-palace-table th, .mhz-palace-table td { border: 1px solid var(--mhz-line); padding: .4rem .5rem; text-align: left; vertical-align: top; }
.mhz-palace-table th { background: var(--mhz-card-alt); color: var(--mhz-orange-dim); font-size: .74rem; }
.mhz-row--minggong td { background: rgba(242,153,74,.08); }
.mhz-tag { font-size: .64rem; color: var(--mhz-orange); border: 1px solid var(--mhz-orange); border-radius: 8px; padding: 0 4px; }

@media (max-width: 720px) {
  .mhz-cell { font-size: .74rem; min-height: 150px; padding: .45rem .5rem; }
  .mhz-star--main { font-size: .88rem; }
  .mhz-actionbar { flex-direction: column; align-items: stretch; }
}