:root {
  --bg: #f2eee5;
  --bg-deep: #e9e2d5;
  --card: rgba(255, 253, 247, 0.94);
  --card-solid: #fffdf8;
  --ink: #1f2824;
  --muted: #788079;
  --line: #ded7c9;
  --green: #173b35;
  --green-2: #24574d;
  --green-soft: #e2ebe5;
  --red: #a5463b;
  --gold: #b48b45;
  --gold-soft: #f3ead6;
  --shadow: 0 18px 45px rgba(37, 40, 31, 0.08);
  --radius: 18px;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  font-family: "Microsoft YaHei UI", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 85% 10%, rgba(180, 139, 69, 0.08), transparent 25%),
    linear-gradient(135deg, var(--bg) 0%, #f7f3ec 55%, var(--bg-deep) 100%);
  -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; }
button { color: inherit; }

.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 224px;
  padding: 28px 18px 22px;
  color: #ecf1eb;
  background:
    linear-gradient(rgba(20, 54, 49, .97), rgba(13, 43, 38, .99)),
    repeating-linear-gradient(45deg, transparent 0 5px, rgba(255,255,255,.02) 5px 6px);
  display: flex;
  flex-direction: column;
  z-index: 10;
  box-shadow: 6px 0 25px rgba(15, 45, 40, .12);
}

.brand { display: flex; align-items: center; gap: 13px; padding: 0 10px 26px; }
.brand-seal {
  width: 46px; height: 46px; display: grid; place-items: center;
  background: #d8cfb8; color: var(--green); border-radius: 13px 5px 13px 5px;
  font-family: "STKaiti", "KaiTi", serif; font-size: 28px; font-weight: 700;
  box-shadow: inset 0 0 0 2px rgba(23,59,53,.15);
}
.brand strong { display: block; font-family: "STKaiti", "KaiTi", serif; font-size: 25px; letter-spacing: 5px; }
.brand span { font-size: 11px; letter-spacing: 3px; color: rgba(236,241,235,.55); }

.nav-list { display: grid; gap: 7px; }
.nav-item {
  border: 0; background: transparent; color: rgba(238,244,239,.69);
  min-height: 46px; border-radius: 11px; padding: 0 13px; cursor: pointer;
  display: grid; grid-template-columns: 26px 1fr auto; align-items: center;
  text-align: left; transition: .2s ease;
}
.nav-item:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav-item.active { color: #fff; background: rgba(236,241,235,.12); box-shadow: inset 3px 0 #ccb778; }
.nav-icon { font-family: "STKaiti", "KaiTi", serif; font-size: 18px; color: #c9b875; }
.nav-badge { font-size: 10px; padding: 2px 6px; border-radius: 20px; background: rgba(255,255,255,.12); }

.sidebar-verse {
  position: relative; margin: auto 10px 20px; padding: 20px 12px 18px 26px;
  border-top: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1);
}
.sidebar-verse > span { position: absolute; left: 3px; top: 8px; font: 32px "KaiTi"; color: rgba(204,183,120,.45); }
.sidebar-verse p { font: 15px/1.9 "STKaiti", "KaiTi", serif; letter-spacing: 2px; margin: 0 0 8px; color: rgba(255,255,255,.74); }
.sidebar-verse small { color: rgba(255,255,255,.36); font-size: 10px; }

.sidebar-footer { display: flex; align-items: center; gap: 10px; padding: 12px 9px 0; }
.sidebar-footer .icon-button { background: rgba(255,255,255,.09); color: #dcd5bf; border-color: rgba(255,255,255,.08); }
.sidebar-footer span, .sidebar-footer small { display: block; }
.sidebar-footer span { font-size: 12px; }
.sidebar-footer small { margin-top: 3px; font-size: 9px; color: rgba(255,255,255,.42); }
.status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #75af8d; margin-right: 4px; }

.main-content { margin-left: 224px; width: calc(100% - 224px); padding: 30px clamp(24px, 3vw, 50px) 45px; }
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
.eyebrow { margin: 0 0 5px; color: var(--gold); font-size: 9px; font-weight: 700; letter-spacing: 3px; }
.topbar h1 { margin: 0; font: 31px "STKaiti", "KaiTi", serif; letter-spacing: 3px; }
.date-chip { min-width: 220px; display: flex; gap: 11px; align-items: center; justify-content: flex-end; }
.date-chip .date-icon { width: 37px; height: 37px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; font: 18px "KaiTi"; color: var(--green-2); background: var(--card); }
.date-chip strong, .date-chip small { display: block; text-align: right; }
.date-chip strong { font-size: 12px; }
.date-chip small { color: var(--muted); margin-top: 3px; font-size: 10px; }

.view { display: none; animation: fadeIn .28s ease; }
.view.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } }

.workspace-grid { display: grid; grid-template-columns: minmax(340px, .76fr) minmax(590px, 1.34fr); gap: 22px; align-items: start; }
.card { background: var(--card); border: 1px solid rgba(174,162,139,.29); border-radius: var(--radius); box-shadow: var(--shadow); }
.casting-card { padding: 24px; }
.chart-card { padding: 24px 26px; min-height: 680px; }

.card-heading, .card-heading > div, .chart-topline, .chart-topline > div:first-child { display: flex; align-items: center; justify-content: space-between; }
.card-heading > div, .chart-topline > div:first-child { justify-content: flex-start; gap: 12px; }
.card-heading h2, .chart-topline h2 { font: 20px "STKaiti", "KaiTi", serif; margin: 0; letter-spacing: 1px; }
.card-heading p, .chart-topline p { margin: 3px 0 0; color: var(--muted); font-size: 10px; }
.card-heading.compact { margin-top: 1px; }
.step-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--green-soft); color: var(--green); font: 15px "STKaiti", "KaiTi", serif; }
.soft-badge { padding: 5px 9px; background: var(--gold-soft); color: #927039; border-radius: 99px; font-size: 10px; }

.field-label { display: block; color: var(--muted); font-size: 10px; margin: 20px 0 7px; }
.input-wrap { position: relative; }
input, select {
  width: 100%; border: 1px solid var(--line); color: var(--ink); background: rgba(255,255,255,.58);
  outline: none; border-radius: 10px; padding: 11px 12px; transition: .18s ease;
}
input:focus, select:focus { border-color: #8ba69d; box-shadow: 0 0 0 3px rgba(55,104,93,.09); }
.question-wrap input { padding-right: 62px; font-family: "STKaiti", "KaiTi", sans-serif; font-size: 15px; }
.question-wrap > span { position: absolute; right: 11px; top: 13px; color: #a5a59e; font-size: 9px; }
.two-column { display: grid; grid-template-columns: 1.25fr .75fr; gap: 12px; }
.two-column .field-label { margin-top: 14px; }
.two-column input { font-size: 11px; }
.divider { height: 1px; background: var(--line); margin: 23px 0; opacity: .72; }

.method-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin: 18px 0; padding: 4px; border-radius: 11px; background: #ece8de; }
.method-tab { border: 0; padding: 9px 5px; border-radius: 8px; color: #777b75; background: transparent; cursor: pointer; font-size: 11px; }
.method-tab.active { color: var(--green); background: var(--card-solid); box-shadow: 0 2px 8px rgba(48,48,39,.08); font-weight: 700; }
.method-panel { display: none; }
.method-panel.active { display: block; }
.coin-stage { display: flex; align-items: center; gap: 16px; min-height: 98px; padding: 15px 12px; border: 1px dashed #d1c7b3; border-radius: 13px; background: linear-gradient(135deg, rgba(243,234,214,.55), rgba(231,239,234,.55)); }
.coins { display: flex; min-width: 112px; padding-left: 6px; }
.coin { width: 43px; height: 43px; margin-left: -8px; border-radius: 50%; display: grid; place-items: center; color: #6f542b; font: 16px "STKaiti", "KaiTi"; border: 2px solid #b98d43; background: radial-gradient(circle, #f2dfaa 35%, #caa35d 38% 55%, #ecd496 58%); box-shadow: 1px 4px 8px rgba(73,53,22,.19); }
.coin-b { transform: translateY(8px) rotate(8deg); }
.coin-c { transform: rotate(-7deg); }
.coin-stage strong { font: 15px "STKaiti", "KaiTi", serif; }
.coin-stage p, .method-note { color: var(--muted); font-size: 10px; margin: 5px 0 0; line-height: 1.6; }

.cast-progress { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 13px 0; }
.progress-line { height: 34px; border: 1px solid var(--line); border-radius: 8px; display: grid; place-items: center; font-size: 10px; color: var(--muted); background: rgba(255,255,255,.38); }
.progress-line.filled { color: var(--green); border-color: #b8c9c0; background: var(--green-soft); }
.progress-line.moving { color: var(--red); border-color: #d4aea9; background: #f5e6e2; }

.action-row { display: flex; gap: 8px; margin-top: 14px; }
.action-row.end { justify-content: flex-end; }
.button { border: 0; min-height: 37px; padding: 0 15px; border-radius: 9px; cursor: pointer; transition: .18s ease; font-size: 11px; }
.button:hover { transform: translateY(-1px); }
.button.primary { background: var(--green-2); color: white; }
.button.ink { background: #292f2c; color: white; flex: 1; }
.button.secondary { background: transparent; border: 1px solid var(--line); color: var(--muted); }
.button.mini { min-height: 32px; padding: 0 12px; background: var(--green); color: white; }
.button.danger { color: var(--red); border: 1px solid #d8b3ad; background: rgba(255,255,255,.4); }
.icon-button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 9px; background: transparent; display: grid; place-items: center; cursor: pointer; }

.manual-lines { display: grid; gap: 7px; margin-top: 12px; }
.manual-row { display: grid; grid-template-columns: 40px 1fr 54px; align-items: center; gap: 8px; }
.manual-row > span { font-size: 10px; color: var(--muted); }
.yin-yang-toggle { display: grid; grid-template-columns: 1fr 1fr; background: #ece8df; padding: 3px; border-radius: 8px; }
.yin-yang-toggle button, .moving-toggle { border: 0; border-radius: 6px; padding: 6px; cursor: pointer; background: transparent; font-size: 10px; color: var(--muted); }
.yin-yang-toggle button.active { color: var(--green); background: var(--card-solid); font-weight: 700; box-shadow: 0 1px 5px rgba(0,0,0,.05); }
.moving-toggle { border: 1px solid var(--line); }
.moving-toggle.active { color: var(--red); border-color: #d5aaa4; background: #f3e1de; }
.number-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 13px; }
.number-grid label span { display: block; font-size: 10px; margin: 0 0 5px; color: var(--muted); }

.chart-topline { border-bottom: 1px solid var(--line); padding-bottom: 16px; }
.chart-actions { display: flex; align-items: center; gap: 7px; }
.use-god-control { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 9px; }
.use-god-control select { width: 88px; padding: 7px 8px; font-size: 10px; }
#useGodLineSelect { width: 145px; }
.hex-summary { display: grid; grid-template-columns: 1fr 70px 1fr; gap: 7px; align-items: center; padding: 22px 10px 17px; }
.hex-hero { display: flex; align-items: center; gap: 13px; }
.hex-hero.changed { justify-content: flex-end; }
.hex-symbol { font: 49px "Segoe UI Symbol", sans-serif; line-height: 1; color: var(--green); }
.hex-hero.changed .hex-symbol { color: var(--gold); }
.summary-label { color: var(--muted); font-size: 9px; letter-spacing: 2px; }
.hex-hero h3 { margin: 3px 0 2px; font: 20px "STKaiti", "KaiTi", serif; white-space: nowrap; }
.hex-hero p { margin: 0; color: var(--muted); font-size: 9px; }
.change-arrow { text-align: center; color: var(--muted); }
.change-arrow span { display: block; font-size: 8px; letter-spacing: 1px; }
.change-arrow b { display: block; margin-top: 1px; color: var(--red); font-size: 23px; font-weight: 400; }

.calendar-strip { display: grid; grid-template-columns: 1.35fr 1px .9fr 1px .9fr 1px .75fr; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 10px 13px; background: #f7f3ea; }
.calendar-strip > div { text-align: center; }
.calendar-strip span, .calendar-strip strong { display: block; }
.calendar-strip span { font-size: 8px; color: var(--muted); margin-bottom: 3px; }
.calendar-strip strong { font: 12px "STKaiti", "KaiTi", serif; color: var(--green); }
.calendar-strip i { height: 20px; width: 1px; background: var(--line); }

.line-table-wrap { margin-top: 15px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; }
.line-table-head, .line-row { display: grid; grid-template-columns: 52px minmax(135px,1fr) 92px 40px minmax(135px,1fr); align-items: center; }
.line-table-head { min-height: 30px; color: var(--muted); background: #eee9df; font-size: 8px; text-align: center; }
.line-row { min-height: 58px; border-top: 1px solid var(--line); background: rgba(255,255,255,.24); transition: .2s ease; }
.line-row:hover { background: rgba(226,235,229,.45); }
.line-row.highlight { background: #f5ead4; box-shadow: inset 3px 0 var(--gold); }
.line-row.use-god-candidate { cursor: pointer; box-shadow: inset 2px 0 #b9a979; }
.line-row.use-god-candidate:not(.use-god-selected) { background: rgba(243,234,214,.38); }
.line-row.use-god-selected { box-shadow: inset 4px 0 var(--red); }
.line-row > * { text-align: center; }
.spirit { font: 12px "STKaiti", "KaiTi", serif; color: #7c7160; }
.najia { display: flex; justify-content: center; align-items: baseline; gap: 7px; white-space: nowrap; }
.najia .relative { font: 13px "STKaiti", "KaiTi", serif; color: var(--green); }
.najia .stem-branch { color: var(--muted); font-size: 9px; }
.line-visual { position: relative; display: flex; justify-content: center; align-items: center; gap: 8px; }
.yao-bar { display: inline-block; width: 58px; height: 7px; position: relative; }
.yao-bar::before, .yao-bar::after { content: ""; position: absolute; top: 0; height: 7px; background: var(--green); border-radius: 2px; }
.yao-bar.yang::before { left: 0; width: 58px; }
.yao-bar.yin::before, .yao-bar.yin::after { width: 24px; }
.yao-bar.yin::before { left: 0; }
.yao-bar.yin::after { right: 0; }
.line-visual.moving .yao-bar::before, .line-visual.moving .yao-bar::after { background: var(--red); }
.move-mark { position: absolute; right: 2px; color: var(--red); font-size: 12px; font-weight: 700; }
.shi-ying { width: 24px; height: 24px; display: inline-grid; place-items: center; border-radius: 50%; color: var(--red); border: 1px solid transparent; font: 12px "STKaiti", "KaiTi", serif; }
.shi-ying:not(:empty) { border-color: #d8b0aa; background: #f9edeb; }
.changed-muted { opacity: .5; }

.reading-notes { margin-top: 13px; display: grid; grid-template-columns: auto 1fr; gap: 15px; align-items: center; }
.note-title span, .note-title small { display: block; }
.note-title span { font: 14px "STKaiti", "KaiTi", serif; }
.note-title small { color: var(--muted); font-size: 8px; margin-top: 3px; }
.reading-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.reading-chip { padding: 5px 9px; border-radius: 99px; background: var(--green-soft); color: var(--green); font-size: 9px; }
.reading-chip.warn { color: #8c463d; background: #f4e4e0; }

.use-god-analysis { margin-top: 15px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.2); }
.use-god-analysis-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); background: #f2ede3; }
.use-god-analysis-head > div > span, .use-god-analysis-head > div > small { display: block; }
.use-god-analysis-head > div > span { color: var(--green); font: 14px "STKaiti", "KaiTi", serif; }
.use-god-analysis-head > div > small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.use-god-empty { padding: 22px 14px; color: var(--muted); text-align: center; font-size: 9px; }
.use-god-analysis-grid { display: grid; grid-template-columns: .8fr 1.1fr 1.1fr; }
.use-god-analysis-grid.hidden { display: none; }
.analysis-column { min-width: 0; padding: 12px; }
.analysis-column + .analysis-column { border-left: 1px solid var(--line); }
.analysis-column h4 { margin: 0 0 9px; color: var(--muted); font-size: 9px; font-weight: 500; letter-spacing: 1px; }
.effect-list { display: grid; gap: 6px; }
.effect-item { padding: 8px 9px; border-left: 3px solid #9aa8a0; border-radius: 7px; background: rgba(237,240,235,.7); }
.effect-item.support { border-left-color: #5d927a; background: #e7f0e9; }
.effect-item.warning { border-left-color: #b18a49; background: #f4ecda; }
.effect-item.danger { border-left-color: #ad5046; background: #f5e5e2; }
.effect-item > div { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.effect-item b { color: var(--ink); font: 10px "STKaiti", "KaiTi", serif; }
.effect-item span { flex: none; padding: 2px 4px; border-radius: 4px; color: var(--muted); background: rgba(255,255,255,.5); font-size: 6px; }
.effect-item p { margin: 4px 0 0; color: var(--muted); font-size: 7px; line-height: 1.55; }
.effect-empty { padding: 18px 4px; color: var(--muted); text-align: center; font-size: 8px; }

.empty-chart { min-height: 500px; display: grid; place-content: center; text-align: center; color: var(--muted); }
.empty-chart.hidden, #chartContent.hidden { display: none; }
.empty-symbol { color: #cbbf9d; font-size: 58px; }
.empty-chart h3 { font: 20px "STKaiti", "KaiTi"; color: var(--ink); margin: 12px 0 2px; }
.empty-chart p { font-size: 10px; }

.history-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.history-toolbar h2 { font: 23px "STKaiti", "KaiTi"; margin: 0; }
.history-toolbar p { color: var(--muted); font-size: 11px; margin: 5px 0 0; }
.history-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.history-actions .button { min-height: 36px; white-space: nowrap; }
.history-filters { display: flex; flex-wrap: wrap; gap: 7px; margin: -4px 0 15px; }
.history-filters button {
  min-width: 58px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 99px;
  color: var(--muted); background: rgba(255,255,255,.32); font-size: 9px; cursor: pointer;
}
.history-filters button:hover, .history-filters button.active { color: #fff; border-color: var(--green); background: var(--green); }
.history-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.history-item { padding: 18px; cursor: pointer; position: relative; transition: .2s ease; }
.history-item:hover { transform: translateY(-2px); box-shadow: 0 22px 50px rgba(37,40,31,.12); }
.history-item-top { display: flex; justify-content: space-between; align-items: start; }
.history-item time { color: var(--muted); font-size: 9px; }
.history-item h3 { font: 17px "STKaiti", "KaiTi"; margin: 10px 0 5px; }
.history-type-badge { padding: 4px 8px; border-radius: 99px; color: var(--green); background: var(--green-soft); font-size: 8px; }
.history-type-badge.ziwei { color: #755b87; background: #f0e9f3; }
.history-type-badge.meihua { color: var(--red); background: #f5e8e5; }
.history-type-badge.liuyao { color: #8a692f; background: #f4ecd9; }
.history-detail { min-height: 28px; margin: 0 30px 10px 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.history-record-line { display: flex; align-items: center; gap: 10px; color: var(--green); }
.history-record-line > span { flex: 0 0 auto; font: 28px "STKaiti", "KaiTi", "Segoe UI Symbol", serif; }
.history-record-line > b { font: 12px/1.55 "STKaiti", "KaiTi", serif; }
.history-gua { display: flex; align-items: center; gap: 10px; color: var(--green); font: 15px "STKaiti", "KaiTi"; }
.history-gua span:first-child { font: 30px "Segoe UI Symbol"; }
.history-item small { color: var(--muted); }
.history-delete { position: absolute; right: 12px; bottom: 12px; width: 27px; height: 27px; border: 0; border-radius: 7px; background: transparent; color: #aaa196; cursor: pointer; }
.history-delete:hover { color: var(--red); background: #f4e4e0; }
.empty-state { text-align: center; padding: 90px 20px; color: var(--muted); }
.empty-state > span { font-size: 42px; color: #c7bfae; }
.empty-state h3 { color: var(--ink); font: 18px "STKaiti", "KaiTi"; margin: 13px 0 4px; }
.empty-state p { font-size: 10px; }

.guide-hero { padding: 25px 28px; margin-bottom: 16px; background: linear-gradient(115deg, var(--card), var(--green-soft)); }
.guide-hero h2 { font: 25px "STKaiti", "KaiTi"; margin: 4px 0; }
.guide-hero > p:last-child { color: var(--muted); font-size: 11px; }
.guide-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.guide-card { padding: 22px; position: relative; overflow: hidden; }
.guide-card > span { position: absolute; right: 17px; top: 8px; color: rgba(180,139,69,.17); font: 42px Georgia; }
.guide-card h3 { font: 17px "STKaiti", "KaiTi"; margin: 0 0 9px; color: var(--green); }
.guide-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.9; }
.reference-table { margin-top: 15px; padding: 23px; }
.reference-table h3 { margin: 0 0 17px; font: 18px "STKaiti", "KaiTi"; }
.element-flow { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; }
.element-flow span { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 50%; color: white; font: 16px "STKaiti"; }
.element-flow b { color: var(--muted); font-size: 9px; font-weight: 400; }
.wood { background: #4d7b63; } .fire { background: #ae594a; } .earth { background: #9b7a49; } .metal { background: #8b8b81; } .water { background: #41677a; }
.controls-flow { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 15px; }
.controls-flow span { color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: 6px 10px; font-size: 9px; }

.app-signature {
  margin-top: 26px;
  padding: 16px 8px 2px;
  border-top: 1px solid rgba(174,162,139,.28);
  color: var(--muted);
  text-align: center;
}
.app-signature span, .app-signature small { display: block; }
.app-signature span { font-size: 9px; letter-spacing: .4px; }
.app-signature small { margin-top: 4px; font-size: 8px; opacity: .72; }

/* Unified metaphysics modules */
.module-intro { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 17px; }
.module-intro h2 { margin: 1px 0 4px; font: 25px "STKaiti", "KaiTi", serif; letter-spacing: 2px; }
.module-intro > div > p:last-child { margin: 0; color: var(--muted); font-size: 10px; }
.module-tag { padding: 7px 12px; border: 1px solid #b8cabf; border-radius: 99px; color: var(--green); background: var(--green-soft); font-size: 10px; }
.module-tag.purple { color: #755b87; border-color: #d4c4dd; background: #f0e9f3; }
.module-tag.red { color: var(--red); border-color: #dfbcb6; background: #f5e8e5; }
.module-form-card { padding: 19px 21px; margin-bottom: 17px; }
.module-form-grid { display: grid; align-items: end; gap: 11px; }
.bazi-form-grid { grid-template-columns: .8fr 1.35fr .55fr .9fr auto; }
.ziwei-form-grid { grid-template-columns: repeat(5, minmax(90px, 1fr)) auto; }
.module-form-grid label > span, .meihua-form > label > span { display: block; margin: 0 0 6px; color: var(--muted); font-size: 9px; }
.module-form-grid input, .module-form-grid select { min-height: 40px; padding: 9px 10px; font-size: 11px; }
.module-submit { min-height: 40px; white-space: nowrap; }
.module-save-pair { display: flex; gap: 7px; }
.module-save-pair .button { min-height: 40px; }
.form-footnote { color: var(--muted); margin: 10px 0 0; font-size: 9px; }

.bazi-summary-grid { display: grid; grid-template-columns: minmax(620px, 1.55fr) minmax(235px, .55fr); gap: 16px; }
.bazi-pillars-card, .relation-card, .detail-card, .flow-year-card { padding: 20px; }
.section-title-row, .section-title-row > div, .small-card-title { display: flex; align-items: center; justify-content: space-between; }
.section-title-row > div { justify-content: flex-start; gap: 11px; }
.section-title-row > .result-toolbar { justify-content: flex-end; gap: 8px; }
.section-title-row h3, .small-card-title h3 { margin: 0; font: 18px "STKaiti", "KaiTi", serif; }
.section-title-row p { margin: 3px 0 0; color: var(--muted); font-size: 9px; }
.day-master-badge { padding: 7px 10px; color: var(--green); background: var(--green-soft); border-radius: 9px; font-size: 10px; }
.small-card-title { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.small-card-title span { color: var(--muted); font-size: 8px; }

.pillars-table { margin-top: 15px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.pillars-head, .pillar-row { display: grid; grid-template-columns: 52px repeat(4, 1fr); align-items: stretch; }
.pillars-head { color: var(--muted); background: #eee9df; text-align: center; font-size: 9px; }
.pillars-head > * { padding: 8px 4px; }
.pillar-row { border-top: 1px solid var(--line); }
.pillar-row > b { display: grid; place-items: center; color: var(--muted); background: rgba(238,233,223,.55); font-size: 9px; font-weight: 400; }
.pillar-row > span { min-width: 0; padding: 8px 5px; border-left: 1px solid var(--line); text-align: center; }
.ten-god-row span { color: var(--green-2); font: 13px "STKaiti", "KaiTi", serif; }
.stem-row span, .branch-row span { padding-block: 9px; }
.stem-row span > b, .branch-row span > b { display: block; font: 28px "STKaiti", "KaiTi", serif; background: transparent; }
.stem-row small, .branch-row small, .nayin-row small { display: block; color: var(--muted); font-size: 8px; margin-top: 2px; }
.pillars-table .wood { color: #3f765b; background: transparent; }
.pillars-table .fire { color: #ad5043; background: transparent; }
.pillars-table .earth { color: #9a7138; background: transparent; }
.pillars-table .metal { color: #777c78; background: transparent; }
.pillars-table .water { color: #3a687d; background: transparent; }
.hidden-row span { display: flex; justify-content: center; gap: 7px; flex-wrap: wrap; min-height: 50px; }
.hidden-row i { font-style: normal; opacity: .66; }
.hidden-row i.main-qi { opacity: 1; }
.hidden-row em { display: block; font: 15px "STKaiti", "KaiTi", serif; background: transparent !important; }
.hidden-row small { display: block; color: var(--muted); font-size: 7px; }
.nayin-row b { display: block; font: 12px "STKaiti", "KaiTi", serif; }

.relation-list { display: grid; gap: 7px; margin-top: 13px; max-height: 323px; overflow: auto; }
.relation-item { display: flex; align-items: center; justify-content: space-between; padding: 9px 10px; color: var(--green); background: var(--green-soft); border-radius: 8px; }
.relation-item span { color: var(--muted); font-size: 8px; }
.relation-item b { font: 11px "STKaiti", "KaiTi", serif; }
.relation-item.warning { color: var(--red); background: #f5e7e4; }
.empty-mini { padding: 35px 8px; color: var(--muted); text-align: center; font-size: 9px; }
.bazi-detail-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: 16px; margin-top: 16px; }
.shensha-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; margin-top: 13px; }
.shensha-item { padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.25); }
.shensha-item > div { display: flex; justify-content: space-between; align-items: center; }
.shensha-item b { color: var(--green); font: 12px "STKaiti", "KaiTi", serif; }
.shensha-item small { color: var(--muted); font-size: 7px; }
.shensha-item > span { display: block; color: var(--muted); margin-top: 5px; font-size: 8px; }
.luck-timeline { display: grid; grid-template-columns: repeat(8, minmax(74px, 1fr)); gap: 6px; margin-top: 13px; overflow-x: auto; }
.luck-item {
  appearance: none; position: relative; min-width: 74px; padding: 9px 6px;
  border: 1px solid var(--line); border-radius: 9px; color: var(--ink);
  background: transparent; text-align: center; font-family: inherit; cursor: pointer; transition: .18s ease;
}
.luck-item:hover { border-color: #9ab2a7; transform: translateY(-1px); }
.luck-item.selected { border-color: #719586; background: var(--green-soft); box-shadow: inset 0 0 0 1px rgba(55,104,93,.18); }
.luck-item:focus-visible, .flow-year-item:focus-visible { outline: 2px solid #719586; outline-offset: 2px; }
.luck-item > span, .luck-item > small, .luck-item > em { display: block; }
.luck-item > span { color: var(--muted); font-size: 7px; }
.luck-item > b { display: block; margin: 5px 0 3px; font: 20px "STKaiti", "KaiTi", serif; }
.luck-item > b i { font-style: normal; background: transparent; }
.luck-item .wood, .flow-year-item .wood { color: #3f765b; }
.luck-item .fire, .flow-year-item .fire { color: #ad5043; }
.luck-item .earth, .flow-year-item .earth { color: #9a7138; }
.luck-item .metal, .flow-year-item .metal { color: #777c78; }
.luck-item .water, .flow-year-item .water { color: #3a687d; }
.luck-item > small { color: var(--muted); font-size: 7px; white-space: nowrap; }
.luck-item > em { margin-top: 5px; color: #9c8062; font-size: 7px; font-style: normal; }
.luck-selection-detail {
  display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 9px 10px;
  border-radius: 9px; color: var(--muted); background: rgba(55,104,93,.07); font-size: 8px; line-height: 1.6;
}
.luck-selection-detail b { flex: 0 0 auto; color: var(--green); font: 11px "STKaiti", "KaiTi", serif; }
.flow-year-card { margin-top: 16px; }
.flow-year-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 13px; }
.flow-year-item {
  appearance: none; min-width: 0; padding: 10px; border: 1px solid var(--line);
  border-radius: 10px; color: var(--ink); background: transparent; text-align: left;
  font-family: inherit; cursor: pointer; transition: .18s ease;
}
.flow-year-item:hover { border-color: #bea66e; transform: translateY(-1px); }
.flow-year-item.selected { background: var(--gold-soft); border-color: #c3a65f; box-shadow: inset 0 0 0 1px rgba(171,137,66,.18); }
.flow-year-item.is-current-year > span { color: var(--red); font-weight: 700; }
.flow-year-item > span { color: var(--muted); font-size: 8px; }
.flow-year-item > b { display: block; margin: 4px 0; font: 18px "STKaiti", "KaiTi", serif; }
.flow-year-item > b i { font-style: normal; background: transparent; }
.flow-year-item > small { color: var(--green-2); font-size: 8px; }
.flow-year-item > p { min-height: 26px; margin: 7px 0 0; color: var(--muted); font-size: 7px; line-height: 1.55; }
.flow-year-detail {
  display: grid; grid-template-columns: minmax(180px, .65fr) 1fr 1fr; gap: 10px;
  margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 10px;
  background: rgba(255,255,255,.22);
}
.flow-year-detail > div { padding-right: 10px; border-right: 1px solid var(--line); }
.flow-year-detail span { display: block; color: var(--muted); font-size: 8px; }
.flow-year-detail b { display: block; margin-top: 4px; color: var(--green); font: 14px "STKaiti", "KaiTi", serif; }
.flow-year-detail p { margin: 0; color: var(--muted); font-size: 8px; line-height: 1.7; }
.flow-year-detail strong { color: var(--ink); font-weight: 600; }

.ziwei-layout { display: grid; grid-template-columns: minmax(690px, 1.5fr) minmax(245px, .5fr); gap: 16px; }
.ziwei-chart-card { padding: 12px; }
.ziwei-chart { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, minmax(165px, 1fr)); min-height: 730px; border: 1px solid var(--line); background: #f8f4eb; }
.ziwei-palace { min-width: 0; padding: 8px; border: .5px solid var(--line); background: rgba(255,255,255,.42); }
.ziwei-palace.ming { background: #e8f0ea; box-shadow: inset 0 0 0 2px #729589; }
.ziwei-palace.body:not(.ming) { background: #f4eddd; box-shadow: inset 0 0 0 1px #c5aa6a; }
.ziwei-palace-head { display: grid; grid-template-columns: auto 1fr auto; gap: 4px; align-items: center; padding-bottom: 5px; border-bottom: 1px solid var(--line); }
.ziwei-palace-head span { color: var(--muted); font: 10px "STKaiti", "KaiTi", serif; }
.ziwei-palace-head b { color: var(--green); text-align: center; font: 13px "STKaiti", "KaiTi", serif; }
.ziwei-palace-head small { color: #aa8150; font-size: 7px; }
.main-stars { display: flex; align-items: flex-start; gap: 5px; flex-wrap: wrap; min-height: 53px; padding-top: 7px; }
.main-stars strong { position: relative; color: #554063; font: 15px "STKaiti", "KaiTi", serif; }
.main-stars em { color: #a89f8f; font-size: 8px; font-style: normal; line-height: 1.5; }
.main-stars i { position: absolute; top: 17px; left: 0; padding: 1px 3px; border-radius: 4px; font: normal 6px sans-serif; white-space: nowrap; }
.transform-禄 { color: #28714f !important; background: #dceade; }
.transform-权 { color: #8a5131 !important; background: #f0dfd1; }
.transform-科 { color: #426b88 !important; background: #dfeaf0; }
.transform-忌 { color: #a43f38 !important; background: #f1dedd; }
.aux-stars { display: flex; gap: 3px; flex-wrap: wrap; }
.aux-stars span { padding: 2px 4px; border-radius: 4px; color: #53756a; background: #e4ede7; font-size: 7px; }
.aux-stars span.malefic { color: #a44b43; background: #f2e1df; }
.aux-stars span.minor { color: #765b8b; background: #eee7f1; }
.aux-stars span.stage { color: #8a6b35; background: #f4ead6; }
.aux-stars span.cycle { color: #52708a; background: #e4edf2; }
.ziwei-center { grid-row: 2 / 4; grid-column: 2 / 4; display: grid; place-content: center; text-align: center; background: radial-gradient(circle, #fffdf8, #eee6d7); border: .5px solid var(--line); }
.ziwei-center-seal { width: 55px; height: 55px; display: grid; place-items: center; margin: 0 auto 10px; border: 2px solid #88705e; border-radius: 18px 5px 18px 5px; color: #745c4d; font: 19px "STKaiti", "KaiTi", serif; }
.ziwei-center h3 { margin: 0; font: 18px "STKaiti", "KaiTi", serif; }
.ziwei-center p { margin: 5px 0; color: var(--muted); font-size: 8px; }
.ziwei-center b { color: #755b87; font: 14px "STKaiti", "KaiTi", serif; }
.ziwei-center small { color: var(--muted); margin-top: 3px; font-size: 7px; }
.ziwei-side { display: grid; gap: 13px; align-content: start; }
.ziwei-info-card { padding: 17px; }
.ziwei-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; margin-top: 12px; }
.ziwei-summary > div { padding: 9px; border: 1px solid var(--line); border-radius: 8px; text-align: center; }
.ziwei-summary span, .ziwei-summary small { display: block; color: var(--muted); font-size: 7px; }
.ziwei-summary b { display: block; margin: 4px 0; color: var(--green); font: 12px "STKaiti", "KaiTi", serif; }
.four-transforms { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; margin-top: 12px; }
.transform-card { padding: 9px; border-radius: 8px; text-align: center; }
.transform-card span { font-size: 7px; }
.transform-card b { display: block; margin-top: 3px; font: 13px "STKaiti", "KaiTi", serif; }
.ziwei-note { margin: 12px 0 0; color: var(--muted); font-size: 9px; line-height: 1.8; }

.meihua-workspace { display: grid; grid-template-columns: minmax(310px, .62fr) minmax(600px, 1.38fr); gap: 16px; }
.meihua-form { margin: 0; }
.meihua-tabs { margin: 16px 0 13px; }
.meihua-method-panel { display: none; }
.meihua-method-panel.active { display: block; }
.meihua-method-panel .number-grid { grid-template-columns: repeat(2, 1fr); }
#meihuaNumberPanel .number-grid { grid-template-columns: repeat(3, 1fr); }
.module-wide-actions { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 16px; }
.module-wide-button { width: 100%; min-height: 41px; margin: 0; }
.meihua-result-card { min-height: 430px; padding: 24px; display: flex; flex-direction: column; justify-content: flex-start; }
.meihua-calendar-meta {
  display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-bottom: 18px;
  padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.28);
}
.meihua-calendar-meta > div:last-child { min-width: 90px; padding-left: 12px; border-left: 1px solid var(--line); }
.meihua-calendar-meta span { display: block; color: var(--muted); font-size: 8px; }
.meihua-calendar-meta strong { display: block; margin-top: 4px; color: var(--green); font: 12px "STKaiti", "KaiTi", serif; }
.meihua-hex-row { display: grid; grid-template-columns: 1fr 30px 1fr 30px 1fr; align-items: center; }
.meihua-hex {
  --hex-accent: var(--green); min-width: 0; align-self: stretch; padding: 15px 12px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--hex-accent); border-radius: 12px; background: rgba(255,255,255,.3); text-align: center;
}
.meihua-hex.mutual { --hex-accent: #765b8b; }
.meihua-hex.changed { --hex-accent: #a57a35; }
.meihua-hex > span { display: block; color: var(--hex-accent); font: 60px/1 "Segoe UI Symbol", sans-serif; }
.meihua-hex small { display: block; margin-top: 8px; color: var(--hex-accent); font-size: 8px; font-weight: 700; letter-spacing: 2px; }
.meihua-hex h3 { margin: 4px 0 3px; color: var(--hex-accent); font: 18px "STKaiti", "KaiTi", serif; }
.meihua-hex p { margin: 0; color: var(--muted); font-size: 8px; }
.meihua-hex .meihua-judgment {
  min-height: 57px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line);
  color: var(--ink); text-align: left; font: 9px/1.65 "STKaiti", "KaiTi", serif;
}
.meihua-hex-row > b { color: #b7aa95; text-align: center; font-size: 20px; font-weight: 400; }
.meihua-moving-text {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
  margin-top: 14px; padding: 11px 13px; border-left: 3px solid var(--red); border-radius: 0 9px 9px 0;
  background: rgba(164,75,67,.07);
}
.meihua-moving-text span { color: var(--red); font-size: 9px; font-weight: 700; white-space: nowrap; }
.meihua-moving-text p { margin: 0; color: var(--ink); font: 11px/1.65 "STKaiti", "KaiTi", serif; }
.body-use-panel { display: grid; grid-template-columns: 1fr 1.25fr 1fr; align-items: center; margin-top: 28px; padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: #f7f3ea; }
.body-use-panel > div { text-align: center; }
.body-use-panel span, .body-use-panel small { display: block; color: var(--muted); font-size: 8px; }
.body-use-panel strong { display: block; margin: 4px 0; color: var(--green); font: 16px "STKaiti", "KaiTi", serif; }
.body-use-relation { border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.body-use-relation b { display: block; color: var(--red); font: 16px "STKaiti", "KaiTi", serif; }
.body-use-relation span { margin-top: 4px; }
.meihua-notes { margin-top: 18px; justify-content: center; }

.toast { position: fixed; left: calc(50% + 112px); bottom: 28px; transform: translate(-50%, 20px); padding: 10px 16px; border-radius: 9px; color: white; background: #252c29; box-shadow: 0 9px 30px rgba(0,0,0,.19); font-size: 11px; opacity: 0; pointer-events: none; transition: .25s ease; z-index: 30; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

body.dark {
  --bg: #171c1a; --bg-deep: #101513; --card: rgba(33, 39, 36, .94); --card-solid: #252c29;
  --ink: #e6e6dd; --muted: #969f99; --line: #3b433f; --green: #9bc6b4; --green-2: #326f61;
  --green-soft: #293d36; --gold-soft: #443b29; --shadow: 0 18px 45px rgba(0,0,0,.15);
}
body.dark input, body.dark select { background: rgba(9,12,11,.28); }
body.dark .method-tabs, body.dark .line-table-head { background: #1c211f; }
body.dark .calendar-strip { background: #202622; }
body.dark .coin-stage { background: linear-gradient(135deg, rgba(68,59,41,.35), rgba(41,61,54,.45)); }
body.dark .use-god-analysis-head { background: #202622; }
body.dark .effect-item { background: #29302c; }
body.dark .effect-item.support { background: #293d36; }
body.dark .effect-item.warning { background: #443b29; }
body.dark .effect-item.danger { background: #482f2d; }
body.dark .pillars-head { background: #1c211f; }
body.dark .pillar-row > b { background: rgba(20,24,22,.65); }
body.dark .ziwei-chart, body.dark .body-use-panel { background: #202622; }
body.dark .ziwei-palace { background: rgba(30,36,33,.72); }
body.dark .ziwei-palace.ming { background: #293d36; }
body.dark .ziwei-palace.body:not(.ming) { background: #443b29; }
body.dark .ziwei-center { background: radial-gradient(circle, #2b312e, #1a201d); }
body.dark .module-tag.purple { background: #3d3244; border-color: #594664; }
body.dark .module-tag.red { background: #482f2d; border-color: #68403b; }
body.dark .meihua-calendar-meta, body.dark .meihua-hex, body.dark .flow-year-detail { background: rgba(20,24,22,.52); }
body.dark .meihua-hex.mutual { --hex-accent: #bda4cc; }
body.dark .meihua-hex.changed { --hex-accent: #d3b16d; }
body.dark .history-filters button { background: rgba(255,255,255,.04); }
body.dark .history-filters button:hover, body.dark .history-filters button.active { background: var(--green-2); }
body.dark .history-type-badge { background: rgba(113,153,137,.16); }
body.dark .history-type-badge.ziwei { background: rgba(154,112,181,.16); }
body.dark .history-type-badge.meihua { background: rgba(190,97,82,.16); }
body.dark .history-type-badge.liuyao { background: rgba(190,151,78,.16); }

@media (max-width: 1180px) {
  .workspace-grid { grid-template-columns: 1fr; }
  .chart-card { min-height: 0; }
  .bazi-form-grid { grid-template-columns: repeat(2, 1fr); }
  .module-submit { grid-column: span 2; }
  .bazi-summary-grid, .ziwei-layout, .meihua-workspace { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .sidebar { width: 74px; padding: 20px 10px; }
  .brand { padding: 0 4px 24px; }
  .brand > div:last-child, .nav-item span:not(.nav-icon), .sidebar-verse, .sidebar-footer > div { display: none; }
  .brand-seal { width: 44px; }
  .nav-item { grid-template-columns: 1fr; place-items: center; padding: 0; }
  .main-content { margin-left: 74px; width: calc(100% - 74px); padding: 22px 14px 35px; }
  .date-chip { min-width: auto; }
  .date-chip .date-icon { display: none; }
  .chart-card, .casting-card { padding: 18px 14px; }
  .hex-summary { grid-template-columns: 1fr 35px 1fr; padding-inline: 0; }
  .hex-symbol { font-size: 38px; }
  .hex-hero { gap: 7px; }
  .hex-hero h3 { font-size: 16px; }
  .line-table-head, .line-row { grid-template-columns: 42px minmax(115px,1fr) 78px 34px minmax(115px,1fr); }
  .line-table-wrap { overflow-x: auto; }
  .line-table-head, .line-row { min-width: 510px; }
  .use-god-analysis-grid { grid-template-columns: 1fr; }
  .analysis-column + .analysis-column { border-left: 0; border-top: 1px solid var(--line); }
  .guide-grid { grid-template-columns: 1fr; }
  .toast { left: calc(50% + 37px); }
  .history-toolbar { align-items: flex-start; gap: 12px; }
  .history-toolbar p { line-height: 1.55; }
  .history-actions { flex: 0 0 145px; }
  .section-title-row { align-items: flex-start; gap: 10px; }
  .section-title-row > .result-toolbar { flex-direction: column; align-items: stretch; }
  .module-form-grid, .bazi-form-grid, .ziwei-form-grid { grid-template-columns: 1fr; }
  .module-submit { grid-column: auto; }
  .module-save-pair { display: grid; grid-template-columns: 1fr 1fr; }
  .bazi-detail-grid { grid-template-columns: 1fr; }
  .bazi-summary-grid { display: block; }
  .relation-card { margin-top: 14px; }
  .pillars-table { overflow-x: auto; }
  .pillars-head, .pillar-row { min-width: 580px; }
  .shensha-grid { grid-template-columns: 1fr; }
  .flow-year-grid { grid-template-columns: repeat(2, 1fr); }
  .luck-selection-detail, .flow-year-detail { display: block; }
  .luck-selection-detail span { display: block; margin-top: 5px; }
  .flow-year-detail > div { margin-bottom: 8px; padding: 0 0 8px; border-right: 0; border-bottom: 1px solid var(--line); }
  .flow-year-detail p + p { margin-top: 6px; }
  .ziwei-chart { min-width: 680px; }
  .ziwei-chart-card { overflow-x: auto; }
  .meihua-hex-row { grid-template-columns: 1fr; gap: 10px; }
  .meihua-hex-row > b { transform: rotate(90deg); }
  .meihua-result-card { padding: 20px 14px; }
  .module-wide-actions { grid-template-columns: 1fr 1fr; }
  .meihua-calendar-meta, .meihua-moving-text { grid-template-columns: 1fr; }
  .meihua-calendar-meta > div:last-child { padding: 8px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .meihua-moving-text p { font-size: 10px; }
}