/* ============================================================
   心灵雅阁 · 古风八字排盘 设计系统（精致卷轴 / 水墨风）
   配色：宣纸米 / 墨色 / 朱砂红 / 青黛 / 描金
   字体：楷体（标题）· 宋体（正文）
   ============================================================ */
:root {
    --paper:      #f5edd8;   /* 宣纸底 */
    --paper-2:    #efe3c6;   /* 略深宣纸 */
    --paper-3:    #fbf4e2;   /* 卡片底（偏亮） */
    --ink:        #2a241c;   /* 墨色 */
    --ink-soft:   #5b513f;   /* 淡墨 */
    --ink-faint:  #93866c;   /* 飞白 */
    --cinnabar:   #a52a24;   /* 朱砂红 */
    --cinnabar-2: #c0382f;   /* 亮朱 */
    --indigo:     #2f5d62;   /* 青黛 */
    --indigo-2:   #3a6f76;
    --gold:       #b08a3e;   /* 描金 */
    --gold-soft:  #cdab63;
    --line:       #d8c69b;   /* 描边 */
    --shadow:     rgba(42,36,28,.16);
    --serif: "Songti SC", "STSong", "SimSun", "宋体", serif;
    --kai:   "Kaiti SC", "STKaiti", "KaiTi", "楷体", "Songti SC", serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
    font-family: var(--serif);
    color: var(--ink);
    background-color: var(--paper);
    background-image:
        radial-gradient(ellipse at 18% 0%, rgba(176,138,62,.10), transparent 38%),
        radial-gradient(ellipse at 82% 100%, rgba(47,93,98,.10), transparent 42%),
        repeating-linear-gradient(0deg, rgba(120,100,60,.022) 0 2px, transparent 2px 5px);
    line-height: 1.9;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--indigo); text-decoration: none; transition: color .2s; }
a:hover { color: var(--cinnabar); }

.container { width: min(1140px, 92vw); margin: 0 auto; }

/* ---------- 顶部导航 ---------- */
.topbar {
    position: sticky; top: 0; z-index: 50;
    background: linear-gradient(180deg, rgba(245,237,216,.98), rgba(239,227,198,.96));
    border-bottom: 2px solid var(--cinnabar);
    box-shadow: 0 3px 14px var(--shadow);
    backdrop-filter: blur(4px);
}
.topbar .container { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand .seal {
    width: 40px; height: 40px; border-radius: 7px;
    background: linear-gradient(145deg, var(--cinnabar-2), var(--cinnabar));
    color: #f7e9c8; display: grid; place-items: center;
    font-family: var(--kai); font-weight: 700; font-size: 23px;
    box-shadow: inset 0 0 0 2px rgba(247,233,200,.55), 0 2px 6px rgba(165,42,36,.4);
}
.brand .name { font-family: var(--kai); font-size: 25px; font-weight: 700; color: var(--ink); letter-spacing: 2px; line-height: 1.1; }
.brand .name small { font-family: var(--serif); font-size: 12px; color: var(--ink-faint); letter-spacing: 1px; display: block; margin-top: 2px; }

.nav { display: flex; gap: 2px; flex-wrap: wrap; }
.nav a {
    font-family: var(--kai); font-size: 17px; color: var(--ink-soft);
    padding: 7px 15px; border-radius: 5px; letter-spacing: 1px; position: relative;
}
.nav a:hover, .nav a.active { color: var(--cinnabar); background: rgba(165,42,36,.07); }
.nav a.active::after {
    content: ""; position: absolute; left: 16px; right: 16px; bottom: 3px;
    height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* ---------- 通用区块 ---------- */
.section { padding: 52px 0; }
.section-title {
    font-family: var(--kai); font-size: 31px; color: var(--ink);
    text-align: center; letter-spacing: 5px; margin: 0 0 6px; position: relative; display: inline-block;
}
.section-title::before, .section-title::after {
    content: "❖"; color: var(--gold); font-size: 16px; margin: 0 16px; vertical-align: middle;
}
.title-wrap { text-align: center; margin-bottom: 34px; }
.subtitle { text-align: center; color: var(--ink-faint); letter-spacing: 2px; margin: 0; font-size: 14px; }

/* 宣纸卡片 */
.card {
    background: var(--paper-3);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 26px;
    position: relative;
    box-shadow: 0 6px 22px var(--shadow);
}
.card::before, .card::after {
    content: ""; position: absolute; width: 16px; height: 16px; border: 2px solid var(--gold); opacity: .75;
}
.card::before { top: 9px; left: 9px; border-right: none; border-bottom: none; }
.card::after  { bottom: 9px; right: 9px; border-left: none; border-top: none; }

/* 印章按钮 */
.btn {
    display: inline-block; font-family: var(--kai); font-size: 17px; letter-spacing: 2px;
    padding: 11px 28px; border-radius: 6px; cursor: pointer; border: 1px solid transparent;
    transition: transform .12s, box-shadow .2s, background .2s;
}
.btn-seal { background: linear-gradient(145deg, var(--cinnabar-2), var(--cinnabar)); color: #f8ecd0; box-shadow: 0 3px 0 #6f1d19; }
.btn-seal:hover { background: var(--cinnabar-2); color: #fff; transform: translateY(-1px); }
.btn-seal:disabled { opacity: .7; cursor: default; transform: none; }
.btn-ghost { background: transparent; color: var(--indigo); border-color: var(--indigo); }
.btn-ghost:hover { background: rgba(47,93,98,.09); }
.btn-gold { background: linear-gradient(145deg, var(--gold-soft), var(--gold)); color: #2b2620; box-shadow: 0 3px 0 #8a6420; }
.btn-gold:hover { background: var(--gold-soft); transform: translateY(-1px); }
.btn-block { display: block; width: 100%; text-align: center; }

/* ---------- Hero ---------- */
.hero {
    position: relative; text-align: center; padding: 78px 20px 60px;
    border-bottom: 1px dashed var(--line); overflow: hidden;
    background:
        radial-gradient(ellipse at 50% -10%, rgba(165,42,36,.10), transparent 55%),
        linear-gradient(180deg, rgba(176,138,62,.05), transparent 60%);
}
.hero::after {
    /* 远山剪影 */
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px;
    background:
        radial-gradient(120px 90px at 18% 100%, rgba(47,93,98,.10), transparent 70%),
        radial-gradient(160px 100px at 50% 100%, rgba(42,36,28,.08), transparent 70%),
        radial-gradient(140px 90px at 82% 100%, rgba(165,42,36,.08), transparent 70%);
    pointer-events: none;
}
.hero h1 {
    font-family: var(--kai); font-size: 60px; letter-spacing: 12px;
    color: var(--ink); margin: 0 0 12px; text-shadow: 3px 3px 0 rgba(176,138,62,.20);
    position: relative;
}
.hero h1 .accent { color: var(--cinnabar); }
.hero p { color: var(--ink-soft); font-size: 18px; letter-spacing: 4px; margin: 0 0 28px; position: relative; }
.hero .acts { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; position: relative; }

/* ---------- 八字命盘（四柱）---------- */
.panels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pillar {
    text-align: center; padding: 22px 8px 18px;
    background: linear-gradient(180deg, #fffaf0, var(--paper));
    border: 1px solid var(--line); border-radius: 10px;
    position: relative; box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
}
.pillar .label {
    font-family: var(--kai); color: var(--cinnabar); letter-spacing: 3px;
    font-size: 15px; margin-bottom: 14px;
    display: inline-block; padding: 2px 12px; border: 1px solid rgba(165,42,36,.3); border-radius: 20px;
}
.pillar .gan, .pillar .zhi { font-family: var(--kai); line-height: 1.05; }
.pillar .gan { font-size: 46px; color: var(--indigo); }
.pillar .zhi { font-size: 46px; color: var(--cinnabar); margin-top: 6px; }
.pillar .nayin { margin-top: 12px; color: var(--ink-faint); font-size: 13px; letter-spacing: 1px; }
.pillar .zodiac { margin-top: 4px; font-size: 13px; color: var(--gold); }

/* 命盘卡片 */
.bazi-card { max-width: 860px; margin: 0 auto; }
.bazi-eyebrow { font-family: var(--kai); font-size: 13px; color: var(--ink-faint); letter-spacing: 4px; }
.bazi-str { font-family: var(--kai); font-size: 46px; color: var(--cinnabar); letter-spacing: 8px; margin: 4px 0; text-shadow: 1px 1px 0 rgba(176,138,62,.20); }

.date-line { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 6px 0 22px; }
.date-item {
    display: flex; align-items: center; gap: 10px;
    background: rgba(47,93,98,.06); border: 1px solid var(--line);
    border-radius: 24px; padding: 7px 18px;
}
.date-item .k { font-family: var(--kai); color: var(--ink-faint); font-size: 14px; letter-spacing: 2px; }
.date-item .v { font-family: var(--kai); color: var(--ink); font-size: 17px; letter-spacing: 1px; }
.date-item .v.gz { color: var(--cinnabar); }

.nayin-line { letter-spacing: 2px; color: var(--ink-soft); font-size: 15px; }

/* ---------- 名人案例 ---------- */
.famous-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.famous {
    background: var(--paper-3); border: 1px solid var(--line); border-radius: 12px;
    padding: 20px; text-align: center; transition: transform .15s, box-shadow .2s;
    position: relative;
}
.famous:hover { transform: translateY(-4px); box-shadow: 0 10px 26px var(--shadow); }
.famous .avatar {
    width: 58px; height: 58px; margin: 0 auto 12px; border-radius: 50%;
    background: linear-gradient(145deg, var(--indigo-2), var(--indigo)); color: #f5edd8;
    display: grid; place-items: center; font-family: var(--kai); font-size: 27px;
    box-shadow: inset 0 0 0 2px rgba(245,237,216,.4);
}
.famous .who { font-family: var(--kai); font-size: 21px; color: var(--ink); letter-spacing: 1px; }
.famous .meta { color: var(--ink-faint); font-size: 13px; margin-bottom: 10px; }
.famous .bazi { font-family: var(--kai); font-size: 23px; color: var(--cinnabar); letter-spacing: 3px; }

/* ---------- 表单 ---------- */
.form-row { margin-bottom: 18px; }
.form-row > label { display: block; font-family: var(--kai); color: var(--ink-soft); margin-bottom: 7px; letter-spacing: 1px; font-size: 15px; }
.input, select.input, input.input {
    width: 100%; padding: 11px 13px; font-family: var(--serif); font-size: 16px;
    border: 1px solid var(--line); border-radius: 7px; background: #fffdf6; color: var(--ink);
    transition: border-color .2s, box-shadow .2s;
}
.input:focus { outline: none; border-color: var(--cinnabar); box-shadow: 0 0 0 3px rgba(165,42,36,.12); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.radio-group { display: flex; gap: 10px; }
.radio-group label {
    flex: 1; text-align: center; padding: 10px; border: 1px solid var(--line);
    border-radius: 7px; cursor: pointer; font-family: var(--kai); color: var(--ink-soft);
    background: #fffdf6; transition: all .15s;
}
.radio-group input { display: none; }
.radio-group input:checked + span { color: var(--cinnabar); }
.radio-group label:has(input:checked) { border-color: var(--cinnabar); background: rgba(165,42,36,.06); }

/* 公历 / 农历 切换 */
.mode-tabs { display: flex; gap: 8px; background: rgba(47,93,98,.06); padding: 5px; border-radius: 10px; margin-bottom: 22px; border: 1px solid var(--line); }
.mode-tabs button {
    flex: 1; font-family: var(--kai); font-size: 16px; letter-spacing: 2px; color: var(--ink-soft);
    background: transparent; border: none; padding: 10px; border-radius: 7px; cursor: pointer; transition: all .15s;
}
.mode-tabs button.active { background: var(--cinnabar); color: #f8ecd0; box-shadow: 0 2px 8px rgba(165,42,36,.3); }

/* 加载态 */
.loading {
    text-align: center; padding: 40px 0; color: var(--cinnabar);
    font-family: var(--kai); font-size: 18px; letter-spacing: 3px;
}
.loading::after { content: "◍"; display: inline-block; margin-left: 10px; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 会员等级 ---------- */
.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tier {
    text-align: center; padding: 28px 18px; border-radius: 14px;
    border: 1px solid var(--line); background: var(--paper-3); position: relative;
    transition: transform .15s, box-shadow .2s;
}
.tier:hover { transform: translateY(-4px); box-shadow: 0 12px 28px var(--shadow); }
.tier.featured { border-color: var(--gold); box-shadow: 0 8px 26px rgba(176,138,62,.28); background: linear-gradient(180deg, #fffaf0, var(--paper-3)); }
.tier.featured::before {
    content: "推荐"; position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: var(--gold); color: #2b2620; font-family: var(--kai); font-size: 13px;
    padding: 3px 14px; border-radius: 12px; letter-spacing: 2px;
}
.tier .tname { font-family: var(--kai); font-size: 25px; color: var(--cinnabar); letter-spacing: 2px; }
.tier .tprice { font-size: 32px; color: var(--ink); margin: 10px 0; font-family: var(--kai); }
.tier .tprice small { font-size: 14px; color: var(--ink-faint); }
.tier ul { list-style: none; padding: 0; margin: 14px 0 20px; color: var(--ink-soft); font-size: 14px; }
.tier li { padding: 6px 0; border-bottom: 1px dashed var(--line); }
.tier li:last-child { border-bottom: none; }

/* ---------- 页脚 ---------- */
.footer {
    margin-top: 46px; border-top: 2px solid var(--indigo);
    background: var(--paper-2); color: var(--ink-soft); padding: 32px 0 26px;
}
.footer .container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 18px; }
.footer a { color: var(--ink-soft); }
.footer .links { display: flex; gap: 16px; flex-wrap: wrap; }
.footer .copy { width: 100%; text-align: center; color: var(--ink-faint); font-size: 13px; border-top: 1px dashed var(--line); padding-top: 14px; margin-top: 10px; }

/* 分隔（云纹） */
.divider { text-align: center; color: var(--gold); letter-spacing: 8px; margin: 16px 0; }
.divider::before, .divider::after { content: "——"; color: var(--line); }

/* 提示框 */
.note {
    background: rgba(47,93,98,.08); border-left: 4px solid var(--indigo);
    padding: 13px 16px; border-radius: 6px; color: var(--ink-soft); font-size: 14px; line-height: 1.8;
}
.note.warn { background: rgba(165,42,36,.07); border-left-color: var(--cinnabar); }

/* 表格（后台） */
table.tbl { width: 100%; border-collapse: collapse; background: var(--paper); }
table.tbl th, table.tbl td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; font-size: 14px; }
table.tbl th { background: var(--paper-2); font-family: var(--kai); color: var(--ink); }
table.tbl tr:hover td { background: rgba(176,138,62,.06); }

/* 后台容器 */
.admin-wrap { display: flex; min-height: 100vh; }
.admin-side { width: 210px; background: var(--ink); color: var(--paper); padding: 20px 0; }
.admin-side .brand2 { font-family: var(--kai); font-size: 20px; text-align: center; color: var(--gold-soft); padding: 10px; letter-spacing: 2px; }
.admin-side a { display: block; color: var(--paper); padding: 12px 22px; border-left: 3px solid transparent; }
.admin-side a:hover, .admin-side a.active { background: rgba(176,138,62,.18); border-left-color: var(--gold); color: #fff; }
.admin-main { flex: 1; padding: 26px 30px; background: var(--paper); }

/* 响应式 */
@media (max-width: 860px) {
    .panels { grid-template-columns: repeat(2, 1fr); }
    .tier-grid { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; }
    .hero h1 { font-size: 40px; letter-spacing: 6px; }
    .nav { display: none; }
    .bazi-str { font-size: 36px; letter-spacing: 5px; }
}
.text-center { text-align: center; }
.mt { margin-top: 18px; }
.muted { color: var(--ink-faint); }
.tag { display: inline-block; background: rgba(47,93,98,.12); color: var(--indigo); padding: 2px 10px; border-radius: 20px; font-size: 12px; margin: 2px; }

/* ============================================================
 * V2 排盘结果页（心灵雅阁 · 古风精致卷轴风）
 * ============================================================ */
.bazi-result { display: flex; flex-direction: column; gap: 22px; }

.rz-card {
    background: var(--paper-3);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 24px 26px;
    position: relative;
    box-shadow: 0 8px 26px var(--shadow);
}
.rz-card::before, .rz-card::after {
    content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid var(--gold); opacity: .7;
}
.rz-card::before { top: 8px; left: 8px; border-right: none; border-bottom: none; }
.rz-card::after  { bottom: 8px; right: 8px; border-left: none; border-top: none; }

.rz-sec {
    font-family: var(--kai); font-size: 22px; color: var(--ink);
    letter-spacing: 3px; margin: 0 0 18px; padding-left: 14px; position: relative;
}
.rz-sec::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 5px; height: 22px; border-radius: 3px;
    background: linear-gradient(180deg, var(--cinnabar), var(--gold));
}

/* ① 命盘总览 */
.rz-overview { padding-bottom: 20px; }
.rz-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.rz-name { font-family: var(--kai); font-size: 26px; color: var(--ink); letter-spacing: 2px; }
.rz-sub { color: var(--ink-faint); font-size: 14px; margin-top: 4px; letter-spacing: 1px; }
.rz-bazi { font-family: var(--kai); color: var(--cinnabar); letter-spacing: 4px; font-size: 18px; }
.rz-zodiac { font-family: var(--kai); color: var(--gold); text-align: right; font-size: 14px; }
.rz-zodiac span { display: block; font-size: 26px; color: var(--indigo); }
.rz-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 18px 0 14px; }
.rz-pillar { text-align: center; padding: 14px 6px; background: linear-gradient(180deg, #fffaf0, var(--paper)); border: 1px solid var(--line); border-radius: 10px; }
.rz-plabel { font-family: var(--kai); color: var(--cinnabar); font-size: 13px; letter-spacing: 2px; margin-bottom: 8px; }
.rz-gan { font-family: var(--kai); font-size: 34px; color: var(--indigo); line-height: 1; }
.rz-zhi { font-family: var(--kai); font-size: 34px; color: var(--cinnabar); line-height: 1; margin-top: 4px; }
.rz-nayin { margin-top: 8px; font-size: 12px; color: var(--ink-faint); letter-spacing: 1px; }
.rz-meta { display: flex; gap: 18px; flex-wrap: wrap; color: var(--ink-soft); font-size: 14px; border-top: 1px dashed var(--line); padding-top: 12px; }
.rz-meta b { color: var(--cinnabar); }

/* ② 五行雷达 */
.rz-radar-wrap { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.rz-radar { width: 240px; height: 240px; max-width: 62vw; flex: 0 0 auto; }
.rz-radar .rz-grid { fill: none; stroke: var(--line); stroke-width: 1; }
.rz-radar .rz-axis { stroke: var(--line); stroke-width: 1; }
.rz-radar .rz-data { fill: rgba(165,42,36,.18); stroke: var(--cinnabar); stroke-width: 2; }
.rz-radar .rz-dot { fill: var(--cinnabar); }
.rz-radar .rz-axis-label { font-family: var(--kai); font-size: 14px; text-anchor: middle; dominant-baseline: middle; }
.rz-radar-legend { display: flex; flex-direction: column; gap: 8px; }
.rz-legend-item { display: flex; align-items: center; gap: 8px; font-family: var(--kai); font-size: 16px; color: var(--ink-soft); }
.rz-legend-item i { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }
.rz-legend-item b { color: var(--cinnabar); margin-left: 4px; }

/* ③ 十神格局 */
.rz-tengods { display: flex; flex-direction: column; gap: 10px; }
.rz-tg-row { display: flex; gap: 14px; align-items: flex-start; border-bottom: 1px dashed var(--line); padding-bottom: 10px; }
.rz-tg-row:last-child { border-bottom: none; }
.rz-tg-label { font-family: var(--kai); color: var(--gold); width: 64px; flex: 0 0 auto; font-size: 16px; padding-top: 4px; }
.rz-tg-body { display: flex; flex-direction: column; gap: 6px; }
.rz-god { display: inline-block; font-family: var(--kai); font-size: 18px; color: var(--ink); background: rgba(47,93,98,.08); border: 1px solid var(--line); border-radius: 6px; padding: 3px 12px; }
.rz-god-day { background: rgba(176,138,62,.16); color: var(--gold); border-color: var(--gold); }
.rz-zhi-gods { display: flex; gap: 10px; flex-wrap: wrap; }
.rz-zg { display: inline-flex; align-items: baseline; gap: 4px; font-size: 14px; color: var(--ink-soft); background: #fffdf6; border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; }
.rz-zg i { font-style: normal; font-family: var(--kai); color: var(--indigo); font-size: 16px; }
.rz-zg em { font-style: normal; color: var(--cinnabar); }
.rz-zg small { color: var(--ink-faint); font-size: 11px; }

/* ④ 十二长生 */
.rz-chang { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.rz-chang-item { text-align: center; background: rgba(47,93,98,.05); border: 1px solid var(--line); border-radius: 8px; padding: 10px 6px; }
.rz-c-label { display: block; font-family: var(--kai); color: var(--gold); font-size: 13px; }
.rz-c-zhi { display: block; font-family: var(--kai); font-size: 22px; color: var(--cinnabar); margin: 4px 0; }
.rz-c-stage { display: block; font-family: var(--kai); color: var(--indigo); font-size: 15px; }

/* ⑤ 空亡 */
.rz-void { color: var(--ink-soft); line-height: 1.9; }
.rz-void b { color: var(--cinnabar); }

/* ⑥ 神煞 */
.rz-shensha { display: flex; gap: 10px; flex-wrap: wrap; }
.rz-ss-tag {
    font-family: var(--kai); font-size: 16px; letter-spacing: 1px; cursor: pointer;
    background: linear-gradient(145deg, #fffaf0, var(--paper-3));
    border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px; color: var(--ink);
    display: inline-flex; flex-direction: column; align-items: center; gap: 2px; transition: all .15s;
}
.rz-ss-tag small { font-size: 11px; color: var(--ink-faint); font-family: var(--serif); }
.rz-ss-tag:hover { transform: translateY(-2px); border-color: var(--cinnabar); box-shadow: 0 6px 16px rgba(165,42,36,.2); color: var(--cinnabar); }
.rz-tip { color: var(--ink-faint); font-size: 13px; margin-top: 12px; text-align: center; }

/* ⑦ 纳音意象 */
.rz-nayin { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.rz-ny-item { display: flex; align-items: center; gap: 10px; background: #fffdf6; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.rz-ny-pillar { font-family: var(--kai); color: var(--gold); width: 48px; flex: 0 0 auto; }
.rz-ny-name { font-family: var(--kai); font-size: 17px; color: var(--indigo); }
.rz-ny-yx { color: var(--ink-soft); font-size: 13px; margin-left: auto; text-align: right; }

/* ⑧ 大运 · 流年 */
.rz-dayun-info { color: var(--ink-soft); margin: 0 0 14px; }
.rz-dayun-info b { color: var(--cinnabar); }
.rz-dy-track { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.rz-dy-item { text-align: center; background: rgba(176,138,62,.08); border: 1px solid var(--line); border-radius: 8px; padding: 8px 4px; }
.rz-dy-gz { display: block; font-family: var(--kai); font-size: 18px; color: var(--cinnabar); }
.rz-dy-age { display: block; font-size: 12px; color: var(--ink-faint); }
.rz-dy-year { display: block; font-size: 12px; color: var(--ink-soft); }
.rz-liunian { margin-top: 18px; }
.rz-ln-head { font-family: var(--kai); color: var(--gold); font-size: 15px; margin-bottom: 8px; letter-spacing: 1px; }
.rz-ln-list { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; }
.rz-ln-item { text-align: center; font-size: 12px; color: var(--ink-soft); background: #fffdf6; border: 1px solid var(--line); border-radius: 6px; padding: 6px 2px; line-height: 1.4; }
.rz-ln-item b { display: block; font-family: var(--kai); color: var(--cinnabar); font-size: 14px; }
.rz-ln-item i { font-style: normal; color: var(--indigo); font-size: 11px; }
.rz-ln-hit { background: rgba(165,42,36,.1); border-color: var(--cinnabar); }

/* ⑨ 称骨算命 */
.rz-chenggu { text-align: center; }
.rz-cg-total { font-family: var(--kai); font-size: 38px; color: var(--cinnabar); letter-spacing: 4px; text-shadow: 1px 1px 0 rgba(176,138,62,.2); }
.rz-cg-parts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; color: var(--ink-soft); font-size: 13px; margin: 8px 0 14px; }
.rz-cg-song { font-family: var(--kai); font-size: 18px; color: var(--ink); letter-spacing: 2px; }
.rz-cg-baihua { color: var(--ink-faint); font-size: 14px; margin-top: 6px; }

/* ⑩ 流月 · 流日 */
.rz-liuyue { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.rz-ly-item { text-align: center; font-size: 12px; color: var(--ink-soft); background: #fffdf6; border: 1px solid var(--line); border-radius: 6px; padding: 6px 2px; line-height: 1.4; }
.rz-ly-item b { display: block; font-family: var(--kai); color: var(--cinnabar); font-size: 14px; }
.rz-ly-item i { font-style: normal; color: var(--indigo); font-size: 11px; }
.rz-liuri-head { font-family: var(--kai); color: var(--gold); font-size: 15px; margin: 16px 0 8px; letter-spacing: 1px; }
.rz-liuri { display: grid; grid-template-columns: repeat(12, 1fr); gap: 5px; }
.rz-lr-item { text-align: center; font-size: 11px; color: var(--ink-soft); background: #fffdf6; border: 1px solid var(--line); border-radius: 5px; padding: 5px 1px; line-height: 1.3; }
.rz-lr-item b { display: block; font-family: var(--kai); color: var(--cinnabar); font-size: 12px; }

/* —— 神煞详解模态框（古风卷轴） —— */
.rz-modal-mask { display: none; position: fixed; inset: 0; background: rgba(42,36,28,.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); z-index: 200; }
.rz-modal-mask.show { display: block; }
.rz-modal { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.96); opacity: 0; transition: all .2s ease; z-index: 201; width: min(440px, 92vw); }
.rz-modal.show { display: block; transform: translate(-50%, -50%) scale(1); opacity: 1; }
.rz-modal-paper {
    position: relative; background:
        radial-gradient(ellipse at 20% 0%, rgba(176,138,62,.12), transparent 40%),
        var(--paper-3);
    border: 1px solid var(--gold); border-radius: 14px; padding: 30px 26px 26px;
    box-shadow: 0 20px 50px rgba(42,36,28,.4);
}
.rz-modal-paper::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(176,138,62,.4); border-radius: 9px; pointer-events: none; }
.rz-modal-close { position: absolute; top: 10px; right: 14px; background: transparent; border: none; font-size: 26px; color: var(--ink-faint); cursor: pointer; line-height: 1; }
.rz-modal-close:hover { color: var(--cinnabar); }
.rz-modal-seal {
    width: 46px; height: 46px; border-radius: 8px; display: grid; place-items: center;
    font-family: var(--kai); font-size: 24px; color: #f7e9c8; margin: 0 auto 12px;
    background: linear-gradient(145deg, var(--cinnabar-2), var(--cinnabar));
    box-shadow: inset 0 0 0 2px rgba(247,233,200,.5);
}
.rz-seal-good { background: linear-gradient(145deg, var(--gold-soft), var(--gold)); }
.rz-seal-bad  { background: linear-gradient(145deg, var(--cinnabar-2), var(--cinnabar)); }
.rz-seal-mid  { background: linear-gradient(145deg, var(--indigo-2), var(--indigo)); }
.rz-modal-title { font-family: var(--kai); font-size: 26px; text-align: center; color: var(--ink); letter-spacing: 3px; margin: 0 0 6px; }
.rz-modal-luck { text-align: center; font-family: var(--kai); font-size: 15px; letter-spacing: 2px; margin-bottom: 14px; }
.rz-luck-good { color: var(--gold); }
.rz-luck-bad  { color: var(--cinnabar); }
.rz-luck-mid  { color: var(--indigo); }
.rz-modal-block { margin-bottom: 12px; }
.rz-modal-block .rz-modal-key { display: inline-block; font-family: var(--kai); color: #fff; background: var(--indigo); font-size: 13px; padding: 2px 10px; border-radius: 4px; margin-bottom: 6px; letter-spacing: 1px; }
.rz-modal-block p { margin: 0; color: var(--ink-soft); line-height: 1.9; font-size: 15px; }

/* 响应式 */
@media (max-width: 760px) {
    .rz-pillars, .rz-chang { grid-template-columns: repeat(2, 1fr); }
    .rz-dy-track { grid-template-columns: repeat(2, 1fr); }
    .rz-ln-list { grid-template-columns: repeat(5, 1fr); }
    .rz-liuyue { grid-template-columns: repeat(3, 1fr); }
    .rz-liuri { grid-template-columns: repeat(6, 1fr); }
}

/* ============================================================
 * V3 动态岁运推演 · 古风卷轴风（心灵雅阁）
 * 命盘表 / 留意行 / 四层流期选择器 / 神煞双组
 * ============================================================ */
:root { --ocher: #8a5a2b; --paper-4: #fffdf6; }

/* —— ②-1 命盘表（可横向滚动） —— */
.rz-chart-scroll { overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
.rz-chart-table {
    border-collapse: separate; border-spacing: 0;
    width: 100%; min-width: 480px;
    background: var(--paper-3);
    border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
    font-size: 15px;
}
.rz-chart-table th, .rz-chart-table td {
    border-bottom: 1px solid var(--line);
    border-right: 1px solid var(--line);
    padding: 8px 6px; text-align: center; vertical-align: middle;
}
.rz-chart-table tr:last-child td, .rz-chart-table tr:last-child th { border-bottom: none; }
.rz-chart-table th:last-child, .rz-chart-table td:last-child { border-right: none; }
.rz-ct-rowlabel {
    background: linear-gradient(180deg, var(--paper-2), var(--paper));
    color: var(--cinnabar); font-family: var(--kai); font-size: 14px;
    letter-spacing: 1px; white-space: nowrap; width: 1%;
}
.rz-ct-day { background: rgba(176,138,62,.12); }
.rz-ct-sep { border-left: 2px solid var(--gold) !important; }
.rz-ct-period { background: rgba(47,93,98,.04); }
.rz-ct-period-head {
    font-family: var(--kai); color: var(--indigo); font-size: 15px;
    background: rgba(47,93,98,.08); white-space: nowrap;
}
.rz-ct-period-head small { display: block; font-size: 11px; color: var(--ink-faint); font-family: var(--serif); }
.rz-ct-god .rz-god { font-size: 17px; }
.rz-ct-god .rz-god-day { font-size: 15px; }
.rz-ct-gan .rz-big, .rz-ct-zhi .rz-big { font-family: var(--kai); font-size: 30px; line-height: 1; display: block; }
.rz-ct-gan .rz-big { color: var(--indigo); }
.rz-ct-zhi .rz-big { color: var(--cinnabar); }
.rz-wx-tag {
    display: inline-block; font-size: 11px; color: #fff; border-radius: 4px;
    padding: 0 5px; margin-top: 3px; line-height: 1.5;
}
.rz-wx-tag[data-wx="木"] { background: #3f7d4f; }
.rz-wx-tag[data-wx="火"] { background: #c0563b; }
.rz-wx-tag[data-wx="土"] { background: #a9794b; }
.rz-wx-tag[data-wx="金"] { background: #9a8a5a; }
.rz-wx-tag[data-wx="水"] { background: #3a6f76; }

/* 藏干 */
.rz-ct-hidden { line-height: 1.4; }
.rz-hs { display: inline-flex; flex-direction: column; align-items: center; margin: 0 2px; font-size: 12px; }
.rz-hs i { font-style: normal; font-family: var(--kai); font-size: 15px; color: var(--indigo); }
.rz-hs em { font-style: normal; font-size: 10px; color: var(--cinnabar); }
.rz-hs.is-main { font-weight: 700; }
.rz-hs.is-main i { font-size: 17px; }
.rz-hs.is-middle i { color: var(--ink-soft); }
.rz-hs.is-minor { opacity: .6; }
.rz-hs.is-minor i { color: var(--ink-faint); }

/* 星运 / 空亡 / 纳音 */
.rz-stage { font-family: var(--kai); color: var(--indigo); font-size: 15px; }
.rz-ct-void {
    display: inline-block; background: var(--cinnabar); color: #f7e9c8;
    font-size: 11px; border-radius: 4px; padding: 0 5px; margin-left: 4px;
}
.rz-ct-nayin { display: block; font-size: 11px; color: var(--ink-faint); margin-top: 2px; }

/* 列高亮（悬停「留意」项时联动） */
.rz-chart-table td.is-hl, .rz-chart-table th.is-hl {
    background: rgba(176,138,62,.22); box-shadow: inset 0 0 0 2px var(--gold);
}

/* —— 留意行 —— */
.rz-note-row td, .rz-note-row th {
    background: linear-gradient(180deg, #fbf3e0, var(--paper-3));
    border-top: 2px solid var(--gold);
}
.rz-note-seal {
    font-family: var(--kai); color: #f7e9c8;
    background: linear-gradient(145deg, var(--cinnabar-2), var(--cinnabar));
    font-size: 15px; letter-spacing: 1px;
}
.rz-note-body { text-align: left !important; padding: 12px 14px !important; }
.rz-note-group { margin-bottom: 8px; }
.rz-note-group:last-child { margin-bottom: 0; }
.rz-note-label {
    display: inline-block; font-family: var(--kai); color: var(--gold);
    border: 1px solid var(--gold); border-radius: 6px; padding: 1px 10px;
    margin-right: 10px; font-size: 13px; vertical-align: top;
}
.rz-note-items { display: inline; }
.rz-note-item {
    display: inline-flex; flex-direction: column; align-items: center;
    font-family: var(--kai); font-size: 14px; margin: 2px 6px;
    padding: 4px 10px; border-radius: 8px; background: #fffdf6;
    border: 1px solid var(--line); cursor: default; transition: all .15s;
}
.rz-note-item:hover { box-shadow: 0 4px 12px var(--shadow); transform: translateY(-2px); }
.rz-note-item.is-weak { opacity: .62; }
.rz-note-weak { font-size: 10px; color: var(--ink-faint); font-style: normal; font-family: var(--serif); }
.rz-note-item[data-tone="he"]     { color: var(--indigo);   border-color: var(--indigo); }
.rz-note-item[data-tone="chong"]  { color: var(--cinnabar); border-color: var(--cinnabar); }
.rz-note-item[data-tone="sun"]    { color: var(--ocher);    border-color: var(--ocher); }
.rz-note-item[data-tone="anhe"]   { color: var(--gold);     border-color: var(--gold); }
.rz-note-item[data-tone="mid"]    { color: var(--ink-soft); }
.rz-note-tip { color: var(--cinnabar); font-size: 13px; margin: 4px 0; }
.rz-note-empty { color: var(--ink-faint); font-size: 14px; font-family: var(--kai); letter-spacing: 1px; }

/* —— 岁运推演 四层选择器 —— */
.rz-period-block { margin-bottom: 18px; }
.rz-period-block[hidden] { display: none; }
.rz-period-title {
    font-family: var(--kai); font-size: 18px; color: var(--ink); letter-spacing: 2px;
    border-left: 4px solid var(--cinnabar); padding-left: 12px; margin-bottom: 12px;
}
.rz-period-meta { font-size: 12px; color: var(--ink-faint); font-family: var(--serif); margin-left: 8px; letter-spacing: 0; }
.rz-period-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.rz-period-grid.is-dayun { gap: 8px; }
.rz-period-empty, .rz-period-loading { color: var(--ink-faint); font-size: 14px; padding: 8px 0; }
.rz-period-error {
    color: var(--cinnabar); background: rgba(165,42,36,.08);
    border: 1px solid rgba(165,42,36,.3); border-radius: 8px; padding: 8px 12px; font-size: 13px;
}
.rz-pk-cell {
    position: relative; cursor: pointer; font-family: var(--kai);
    background: linear-gradient(145deg, #fffaf0, var(--paper-3));
    border: 1px solid var(--line); border-radius: 10px;
    padding: 10px 14px; min-width: 72px; text-align: center;
    display: inline-flex; flex-direction: column; align-items: center; gap: 3px;
    transition: all .15s; color: var(--ink);
}
.rz-pk-cell:hover { transform: translateY(-2px); border-color: var(--cinnabar); box-shadow: 0 6px 16px rgba(165,42,36,.18); }
.rz-pk-cell.is-active {
    border: 2px solid var(--gold); background: rgba(165,42,36,.08);
    box-shadow: 0 6px 18px rgba(176,138,62,.3);
}
.rz-pk-gz { display: flex; gap: 4px; align-items: baseline; justify-content: center; }
.rz-pk-gz b { font-style: normal; font-family: var(--kai); font-size: 22px; }
.rz-pk-gz b:first-child { color: var(--indigo); }
.rz-pk-gz b:last-child { color: var(--cinnabar); }
.rz-pk-sub { font-size: 12px; color: var(--ink-soft); font-family: var(--serif); }
.rz-pk-ext { font-size: 11px; color: var(--ink-faint); font-family: var(--serif); }
.rz-pk-mark {
    font-size: 11px; color: var(--cinnabar); background: rgba(165,42,36,.1);
    border-radius: 5px; padding: 1px 6px; font-family: var(--serif); max-width: 130px;
}
.rz-pk-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin: 0 1px; }
.rz-pk-dot.rz-luck-good { background: var(--gold); }
.rz-pk-dot.rz-luck-bad  { background: var(--cinnabar); }
.rz-pk-seal {
    position: absolute; right: -6px; top: -6px; background: var(--cinnabar); color: #fff;
    font-family: var(--kai); font-size: 12px; border-radius: 4px; padding: 1px 5px;
    line-height: 1.2; box-shadow: 0 2px 6px rgba(0,0,0,.2);
}

/* —— 神煞 双组（本命 / 流期） —— */
.rz-ss-groups { display: flex; flex-direction: column; gap: 16px; }
.rz-ss-group[hidden] { display: none; }
.rz-ss-group-title {
    font-family: var(--kai); font-size: 17px; color: var(--ink); letter-spacing: 1px;
    margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
}
.rz-ss-group-title::before { content: "✦"; color: var(--gold); }
.rz-ss-count {
    font-family: var(--serif); font-size: 12px; color: #fff; background: var(--indigo);
    border-radius: 10px; padding: 1px 8px;
}
.rz-ss-tag.is-period { border-style: dashed; border-color: var(--indigo); }
.rz-ss-tag.is-period:hover { border-color: var(--cinnabar); }
.rz-ss-tag.is-period small { color: var(--indigo); }

/* —— 神煞模态：命中位置栏 —— */
.rz-modal-block--pos {
    border-left: 3px solid var(--gold); padding-left: 12px;
    background: rgba(176,138,62,.06);
}
.rz-modal-block--pos[hidden] { display: none; }

/* —— 响应式（窄屏） —— */
@media (max-width: 760px) {
    .rz-ct-gan .rz-big, .rz-ct-zhi .rz-big { font-size: 24px; }
    .rz-pk-cell { min-width: 60px; padding: 8px 10px; }
    .rz-pk-gz b { font-size: 18px; }
    .rz-note-label { display: block; margin-bottom: 6px; width: fit-content;
    }
    .rz-dt-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .rz-dt-table { min-width: 600px; }
}

/* ============================================================
 * V3 增强：起运/交运/司令 + 大运横轴 + 五行旺衰 + 神煞入列
 * ============================================================ */

/* —— 起运信息条 —— */
.rz-qiinfo {
    display: flex; flex-wrap: wrap; gap: 10px 24px;
    margin-top: 10px; padding: 10px 14px;
    background: rgba(165,42,36,.04); border-left: 3px solid var(--cinnabar);
    border-radius: 4px; font-size: 13.5px; color: var(--ink); line-height: 1.6;
}
.rz-qiitem, .rz-qi-item { /* both names for compat */ }
.rz-qi-siling {
    margin-left: auto; font-weight: 700; color: var(--cinnabar);
    font-family: var(--serif); letter-spacing: 2px;
}

/* —— 大运横向时间轴 —— */
.rz-dayun-timeline { margin-top: 4px; }
.rz-dt-scroll {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    border-radius: 6px; border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(245,237,216,.6), rgba(255,255,255,.8));
}
.rz-dt-table {
    width: 100%; min-width: 720px; border-collapse: collapse;
    font-family: var(--serif); font-size: 13px;
}
.rz-dt-table th, .rz-dt-table td {
    border: 1px solid var(--line); padding: 8px 6px; text-align: center;
    vertical-align: middle; position: relative;
}
.rz-dt-table thead th {
    background: var(--paper); font-weight: 700; color: var(--cinnabar);
    border-bottom: 2px solid var(--gold); white-space: nowrap;
}
.rz-dt-label {
    background: var(--paper); color: var(--ink-soft); font-weight: 600; font-size: 12px;
    width: 48px; min-width: 48px;
}
.rz-dt-gz { display: block; font-size: 16px; color: var(--cinnabar); }
.rz-dt-table thead th small { display: block; font-size: 11px; color: var(--ink-soft); font-weight: 400; }

.rz-dt-age { white-space: nowrap; }
.rz-dt-year { display: block; font-weight: 700; font-size: 15px; color: var(--indigo); }
.rz-dt-agerange { display: block; font-size: 11px; color: var(--ink-soft); }

.rz-dt-gzcell b { display: inline-block; font-size: 20px; line-height: 1; padding: 0 3px; }
.rz-dt-gan { color: var(--cinnabar); }
.rz-dt-zhi { color: var(--ocher, #8a5a2b); }

/* 大运横轴选中态 */
.is-dy-active { background: rgba(176,138,62,.12) !important; box-shadow: inset 0 0 0 2px var(--gold); }
.is-dy-active .rz-dt-year,
.is-dy-active .rz-dt-gan,
.is-dy-active .rz-dt-zhi { font-weight: 900; }

/* —— 五行旺衰状态栏 —— */
.rz-wx-status { margin-top: 4px; }
.rz-wxs-bar {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    flex-wrap: wrap; padding: 14px 18px;
    background: linear-gradient(135deg, rgba(47,93,98,.06), rgba(165,42,36,.04));
    border-radius: 6px; border: 1px solid var(--line);
}
.rz-wxs-item {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 8px 16px; border-radius: 4px; min-width: 52px;
    transition: transform .2s;
}
.rz-wxs-item:hover { transform: translateY(-2px); }
.rz-wxs-el {
    font-family: var(--serif); font-size: 18px; font-weight: 800;
    display: block; line-height: 1.2;
}
.rz-wxs-st {
    font-size: 12px; font-weight: 600; padding: 2px 12px; border-radius: 10px;
    display: inline-block; line-height: 1.4;
}
/* 旺衰五色 */
.rz-wxs-item.is-旺 .rz-wxs-el { color: #b22222; }   /* 红 */
.rz-wxs-item.is-旺 .rz-wxs-st { background: #b22222; color: #fff; }
.rz-wxs-item.is-相 .rz-wxs-el { color: #d2691e; }   /* 巧克力 */
.rz-wxs-item.is-相 .rz-wxs-st { background: #d2691e; color: #fff; }
.rz-wxs-item.is-休 .rz-wxs-el { color: #2f5d62; }   /* 靛 */
.rz-wxs-item.is-休 .rz-wxs-st { background: #2f5d62; color: #fff; }
.rz-wxs-item.is-囚 .rz-wxs-el { color: #8a5a2b; }   /* 赭 */
.rz-wxs-item.is-囚 .rz-wxs-st { background: #8a5a2b; color: #fff; }
.rz-wxs-item.is-死 .rz-wxs-el { color: #555; }      /* 灰 */
.rz-wxs-item.is-死 .rz-wxs-st { background: #666; color: #fff; }

.rz-wxs-dominant {
    margin-left: 16px; padding-left: 16px; border-left: 2px dashed var(--line);
    font-size: 13px; color: var(--ink-soft);
}
.rz-wxs-dominant b { color: var(--cinnabar); font-weight: 800; }

/* —— 神煞按柱排列（命盘表内）—— */
.rz-ct-ss {
    vertical-align: top; max-width: 90px; font-size: 11.5px; line-height: 1.6;
}
.rz-ss-inline {
    display: inline-block; font-size: 11px; padding: 1px 6px; margin: 1px 2px;
    border: 1px solid var(--line); border-radius: 3px; cursor: pointer;
    background: transparent; color: var(--ink); transition: all .15s;
    font-family: var(--sans-serif);
}
.rz-ss-inline:hover { border-color: var(--gold); background: rgba(176,138,62,.08); }
.rz-ss-inline[data-luck="1"] { color: #2e7d32; border-color: #a5d6a7; }  /* 吉 */
.rz-ss-inline[data-luck="-1"] { color: #c62828; border-color: #ef9a9a; } /* 凶 */

/* —— 缺省 ocher 变量兜底 —— */
:root {
    --ocher: #8a5a2b;
}