/* 字体定义 */
        @font-face{font-family:'Proza';src:url('../../font/Proza-ExtraBoldItalic.woff2') format('woff2');font-weight:800;font-style:italic}

        @keyframes floatSlow {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-5px); }
        }

        /* ── 全局响应式尺寸变量 ── */
        :root {
            /* 命盘高度：减去顶栏+子导航+间距约120px */
            --grid-h: 250px; /* 百度浏览器等旧内核兜底 */
            --grid-h: min(58vw, calc(100vh - 120px), calc(100svh - 120px));
            --inner-h: calc(var(--grid-h) * 0.94);
            --cell-h: calc((var(--inner-h) - 5px) / 4);
            /* 字体大小随宫格大小缩放 */
            --cell-fs: clamp(9px, calc(var(--cell-h) / 14), 15px);
            --cell-fs-sm: clamp(7px, calc(var(--cell-h) / 18), 12px);
        }

        /* ── 顶部单行：logo + nav + form + user-actions ── */

        /* ── 内联表单区 ── */
        .header-form {
            display: flex;
            align-items: center;
            gap: 3px;
            flex-shrink: 1;
            opacity: 1;
        }
        
        .header-form input[type="text"] {
            padding: 3px 4px;
            border: 1px solid var(--color-border);
            border-radius: 4px;
            font-size: 12px;
            width: auto;
        }
        /* Safari flex 容器内 input 不拉伸：显式指定宽度 */
        .header-form #name        { width: 5em; }
        .header-form #solarYear   { width: 3.5em; }
        .header-form #solarMonth,
        .header-form #solarDay,
        .header-form #solarHour,
        .header-form #solarMinute { width: 2.5em; }
        .header-form input[type="text"]:focus {
            outline: none;
            border-color: var(--color-gold);
            box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.15);
        }
        .header-form input[type="radio"] {
            margin: 0 1px 0 3px;
            cursor: pointer;
        }
        /* ── 公历/农历 切换 ── */

        .leap-label {
            font-size: 12px;
            color: var(--color-text);
            align-items: center;
            gap: 2px;
            white-space: nowrap;
            cursor: pointer;
        }
        .leap-label input[type="checkbox"] { cursor: pointer; margin: 0; }
        .header-form .form-actions {
            display: flex;
            gap: 4px;
            margin-left: 3px;
        }

        .user-actions span::before {
            content: '';
            position: absolute;
            top: 0; left: -100%;
            width: 100%; height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
            transition: left 0.5s;
        }
        .user-actions span:hover::before { left: 100%; }
        
        .user-actions span:active { transform: translateY(0); }
        .btn {
            padding: 4px 10px;
            border: none;
            border-radius: 4px;
            font-size: 12px;
            font-family: "MiSans", sans-serif;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }
        .btn::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(255,255,255,0.3);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.4s, height 0.4s;
        }
        .btn:active::after {
            width: 200px;
            height: 200px;
        }
        .btn { padding:3px 12px; border-radius:4px; border:none; cursor:pointer; font-size:12px; font-family:"MiSans",sans-serif; font-weight:400; height:24px; }

        .btn-default:hover {
            background-color: #d0d0d0;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        .btn-default:active {
            transform: translateY(0);
        }
        /* ========== 排盘卡片 ========== */
        .pan-card {
            background: var(--color-panel);
            border: 1px solid var(--color-brand);
            border-radius: 8px;
            padding: 16px;
            margin-left: 10px;
            margin-top: 2px;
            margin-bottom: 16px;
            display: inline-block;
        }
        /* ========== main-content 布局 ========== */
        .main-content {
            display: flex;
            flex-direction: column;
            gap: 4px;
            margin-top: 3px;
            margin-left: 0;
            align-items: stretch;
        }
        /* 盘面+侧边栏横向 */
        .chart-row {
            display: flex;
            gap: 10px;
            align-items: flex-start;
            overflow-x: hidden;
        }
        /* 命盘列：仅包裹盘面 */
        .chart-col {
            flex-shrink: 0;
        }
        .grid-frame {
            width: var(--grid-h);
            height: var(--grid-h);
            flex-shrink: 0;
            border: 1px solid var(--color-star-sub);
            background: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        .palace-grid {
            width: var(--inner-h);
            height: var(--inner-h);
            flex-shrink: 0;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(4, 1fr);
            gap: 1px;
            background-color: var(--color-star-sub);
            border: 1px solid var(--color-star-sub);
        }
        /* ── 命盘底部大限导航栏 ── */
        .dx-scroll-wrap {
            display: flex;
            align-items: center;
            width: var(--grid-h);
            gap: 2px;
        }
        .dx-scroll-arrow {
            flex-shrink: 0;
            width: 22px;
            align-self: stretch;
            padding: 0;
            border: 1px solid #c8c8c8;
            border-radius: 4px;
            background: #f7f7f7;
            color: var(--color-text-sec);
            font-size: 10px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
        }
        .dx-scroll-arrow:active { background: var(--color-border); }
        .dx-viewport {
            flex: 1;
            overflow-x: auto;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }
        .dx-viewport::-webkit-scrollbar { display: none; }
        #daxian-bar {
            display: flex;
            flex-wrap: nowrap;
            gap: 2px;
        }
        .dx-btn {
            flex: 0 0 auto;
            min-width: 38px;
            padding: 2px 4px;
            border: 1px solid #c8c8c8;
            border-radius: 4px;
            background: #f7f7f7;
            font-size: 10px;
            text-align: center;
            cursor: pointer;
            line-height: 1.3;
            color: var(--color-text);
            white-space: nowrap;
            user-select: none;
            transition: background 0.12s, border-color 0.12s, color 0.12s;
        }
        .dx-btn:hover {
            border-color: var(--color-positive);
            color: var(--color-positive);
            background: #f2fdf5;
        }
        /* 当前年龄所在大限 */
        .dx-btn.dx-cur {
            border-color: var(--color-positive);
            color: var(--color-positive);
            background: #f2fdf5;
            font-weight: 700;
        }
        /* 用户手动选中 */
        .dx-btn.dx-sel {
            background: var(--color-positive);
            border-color: var(--color-positive);
            color: #fff;
            font-weight: 700;
        }
        /* 当前 + 已选 */
        .dx-btn.dx-cur.dx-sel {
            background: var(--color-positive);
            border-color: var(--color-positive);
            color: #fff;
        }
        /* 童限按钮：颜色与普通大限相同，仅边框虚线 */
        .tx-btn { border-style: dashed; }
        /* 童限未解锁：灰色不可用 */
        .tx-btn.tx-locked { opacity: .4; cursor: not-allowed; }
        /* ── 流年导航栏 ── */
        #liunian-bar {
            width: var(--grid-h);
            display: flex;
            flex-wrap: wrap;
            gap: 2px;
        }
        .ly-btn {
            flex: 1;
            min-width: 0;
            padding: 2px 1px;
            border: 1px solid #d0d0d0;
            border-radius: 3px;
            background: #f9f9f9;
            font-size: 9px;
            text-align: center;
            cursor: pointer;
            line-height: 1.35;
            color: var(--color-text-sec);
            white-space: nowrap;
            user-select: none;
            transition: background 0.12s, border-color 0.12s, color 0.12s;
        }
        .ly-btn:hover {
            border-color: #0074e5;
            background: #eef5ff;
            color: #0074e5;
        }
        /* 今年 */
        .ly-btn.ly-today {
            border-color: var(--color-gold);
            color: #8a6800;
            background: #fffbee;
            font-weight: 700;
        }
        /* 已选中的流年 */
        .ly-btn.ly-sel {
            background: var(--color-positive);
            border-color: var(--color-positive);
            color: #fff;
            font-weight: 700;
        }
        /* 今年 + 已选中 */
        .ly-btn.ly-today.ly-sel {
            background: var(--color-gold);
            border-color: var(--color-gold);
            color: #fff;
        }
        .ly-age {
            display: inline-block;
            font-size: 0.85em;
            opacity: 0.75;
            margin-left: 1px;
        }

        /* ========== 宫位样式 ========== */
        .palace-item {
            background-color: var(--color-panel);
            padding: 0;
            height: var(--cell-h);
            position: relative;
            border: none;
            opacity: 1;
            cursor: pointer;
            overflow: hidden;
        }
        .palace-item:hover {
            z-index: 10;
            outline: 2px solid var(--color-gold);
            outline-offset: -2px;
        }

        /* 顶部星曜区 */
        .stars-top {
            position: absolute;
            top: 7px;
            left: 7px;
            right: 7px;
            bottom: calc(var(--cell-h) * 0.28);
            display: flex;
            gap: 3px;
            align-items: flex-start;
            flex-wrap: nowrap;
            overflow: hidden;
        }
        /* 中州派三区星曜布局：左右绝对定位，中间独占全宽居中 */
        .stars-top.zhongzhou-layout {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            overflow: visible;
        }
        .stars-top.zhongzhou-layout .zz-left {
            position: absolute;
            left: 0;
            top: 0;
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            gap: 2px;
            z-index: 2;
        }
        .stars-top.zhongzhou-layout .zz-right {
            position: absolute;
            right: 0;
            top: 0;
            display: flex;
            flex-direction: row-reverse;
            align-items: flex-start;
            gap: 2px;
            z-index: 2;
        }
        .stars-top.zhongzhou-layout .zz-center {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: flex-start;
            gap: 2px;
            flex-wrap: wrap;
            padding: 0 28px;
        }
        .star-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            flex-shrink: 0; /* 禁止 flex 自动压缩，让 fitStarsFont 精确控制字号 */
        }
        .star-name {
            line-height: 1.1;
            font-family: "MiSans", sans-serif;
            font-weight: 400;
            font-size: calc(var(--cell-fs) + 4px);
        }
        .bold-stars .star-name.star-red,
        .bold-stars .star-name.star-sixji,
        .bold-stars .star-name.star-sixsha { font-weight: 700; }
        /* 主星 */
        .star-red    { color: var(--color-star); }
        /* 六吉星：左辅右弼文昌文曲天魁天钺 */
        .star-sixji  { color: var(--color-star-ji); }
        /* 六煞星：擎羊陀罗火星铃星地空地劫 */
        .star-sixsha { color: var(--color-star-sha); }
        .purple-sha .star-sixsha { color: var(--color-purple); }
        /* 禄存/天马 */
        .star-purple { color: var(--color-star-aux); }
        /* 杂曜（天刑天姚截空等） */
        .star-blue   { color: var(--color-star-misc); }
        /* 运星（大限流年动态星） */
        .star-run    { color: var(--color-star-run); font-style: italic; }
        /* 太极点四化底色 */
        .star-name.sihua-bg-dx { padding: 0 2px; border-radius: 2px; display: inline-block; }
        .sihua-bg-dx-禄 { background-color: var(--color-positive); }
        .sihua-bg-dx-权 { background-color: var(--color-purple); }
        .sihua-bg-dx-科 { background-color: var(--color-water); }
        .sihua-bg-dx-忌 { background-color: var(--color-fire); }
        .star-white { color: var(--color-panel); }
        /* 斗君星 */
        .star-doujun-dx { color: var(--color-panel); font-weight: 400; background: #2e8b57; border-radius: 2px; padding: 0 2px; }
        .star-doujun-ly { color: var(--color-panel); font-weight: 400; background: var(--color-star-aux); border-radius: 2px; padding: 0 2px; }
        .star-doujun-lm { color: var(--color-panel); font-weight: 400; background: var(--color-brand); border-radius: 2px; padding: 0 2px; }
        /* 中州派斗君（三区布局小星区，与上不同类名但同样式） */
        .zz-palace .doujun-dx { color: var(--color-panel); font-weight: 400; background: #2e8b57; border-radius: 2px; padding: 0 2px; }
        .zz-palace .doujun-ly { color: var(--color-panel); font-weight: 400; background: var(--color-star-aux); border-radius: 2px; padding: 0 2px; }
        .zz-palace .doujun-lm { color: var(--color-panel); font-weight: 400; background: var(--color-brand); border-radius: 2px; padding: 0 2px; }
        /* 中州派小星（共用） */
        .zz-palace .small-star-item { font-size: calc(var(--cell-fs-sm) * 0.95 + 4px); color: var(--color-star-sub); font-weight: 400; }

        .star-status {
            font-size: calc(var(--cell-fs-sm) * 0.9);
            color: var(--color-star-sub);
            line-height: 1;
            font-weight: normal;
        }
        /* 四化专用样式 */
        .sihua {
            font-size: calc(var(--cell-fs-sm) * 0.95);
            font-weight: bold;
            border-radius: 2px;
            padding: 0 2px;
            line-height: 1.2;
            color: #fff;
        }
        .sihua-lu   { background: var(--color-positive); }
        .sihua-quan { background: var(--color-purple); }
        .sihua-ke   { background: var(--color-brand); }
        .sihua-ji   { background: var(--color-fire); }

        /* 流年小限区（红色边框小盒子） */
        .flow-year {
            position: absolute;
            left: 7px;
            right: 20px;
            bottom: calc(var(--cell-h) * 0.26);
            font-size: calc(var(--cell-fs-sm) * 0.9);
            line-height: 1.3;
            color: var(--color-text-sec);
            border: none;
            border-radius: 2px;
            padding: 1px 3px;
            background: transparent;
            overflow: hidden;
        }
        .flow-year .lbl { color: #c30101; font-weight: bold; font-size: inherit; }
        /* 小限子名称：生日前┏ 生日后┓ */
        .sub-name-xl { position: relative; }
        .sub-name-xl .xl-marks { display: contents; }
        .sub-name-xl.xl-show-before .xl-mark-after,
        .sub-name-xl.xl-show-after  .xl-mark-before { display: none; }
        .xl-mark-before {
            position: absolute; top: -2px; left: -4px;
            font-size: 7px; color: var(--color-star-sub); line-height: 1;
        }
        .xl-mark-after {
            position: absolute; top: -2px; right: -4px;
            font-size: 7px; color: var(--color-star-sub); line-height: 1;
        }

        /* 底部三神区（博士 | 将星 | 岁建） */
        .stars-bottom {
            font-size: var(--cell-fs-sm);
            font-weight: bold;
            line-height: 1.2;
            position: absolute;
            bottom: calc(var(--cell-h) * 0.135 + 9px);
            left: 7px;
            right: 7px;
            display: flex;
            overflow: hidden;
        }
        .stars-bottom .col-boshi  { color: var(--color-water); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; min-width:0; }
        .stars-bottom .col-jiang  { color: var(--color-positive); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; min-width:0; margin-left:6px; }
        .stars-bottom .col-sui    { color: #8b4513; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; min-width:0; margin-left:6px; }
        /* 中州派：博士/将星/岁建 纵向堆叠，挪到右侧，贴虚线 */
        .zz-palace .stars-bottom {
            flex-direction: column;
            align-items: flex-start;
            left: auto;
            right: 20px;
            bottom: calc(var(--cell-h) * 0.14 + 4px);
            width: auto;
            font-size: calc(var(--cell-fs-sm) * 0.95);
            font-weight: 400;
        }
        .zz-palace .stars-bottom .col-jiang,
        .zz-palace .stars-bottom .col-sui { margin-left: 0; }

        /* 右侧长生区域（与流年小限同高） */
        .right-side {
            position: absolute;
            right: 4px;
            bottom: calc(var(--cell-h) * 0.26);
            width: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .life-state {
            font-size: calc(var(--cell-fs-sm) * 0.95);
            font-weight: bold;
            color: var(--color-feixing-blue);
            line-height: 1.2;
            text-align: center;
            max-width: 1.1em;
            word-break: break-all;
        }
        .palace-item:hover .life-state {
            color: var(--color-gold);
        }
        /* 中州派小限数字（右侧长生下方，虚线上方，与长生同列，横排） */
        .xiao-right {
            position: absolute;
            right: 4px;
            bottom: calc(var(--cell-h) * 0.148 + 4px);
            font-size: calc(var(--cell-fs-sm) * 0.85);
            color: var(--color-earth);
            line-height: 1.15;
            text-align: center;
            z-index: 2;
            font-family: "MiSans", sans-serif;
            font-weight: 400;
            white-space: nowrap;
        }

        /* 底部宫位信息区 */
        .palace-footer {
            position: absolute;
            left: 7px;
            right: 7px;
            bottom: 4px;
            height: calc(var(--cell-h) * 0.135);
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-top: 1px dashed var(--color-border-warm);
            padding-top: 4px;
        }
        .palace-name {
            font-size: calc(var(--cell-fs) * 1.0);
            font-weight: 400;
            font-family: "MiSans", sans-serif;
            color: var(--color-star);
            line-height: 1.1;
            text-align: center;
            display: flex;
            align-items: flex-end;
        }
        /* 宫名横排组（命宫 + 大命 + 流命 + 小命） */
        .palace-name-group {
            display: flex;
            flex-direction: row;
            gap: 2px;
            align-items: flex-end;
        }
        .pn-main {
            font-weight: 700;
            font-family: "MiSans", sans-serif;
            color: var(--color-star);
            font-size: var(--cell-fs);
            line-height: 1.1;
            text-align: center;
            margin-left: -3px;
        }
        .age-range {
            font-size: calc(var(--cell-fs) * 0.95);
            font-weight: 400;
            font-family: "MiSans", sans-serif;
            color: var(--color-text);
            font-style: normal;
            text-align: center;
            flex: 1;
            min-width: 0;
        }
        /* 当前大限所在宫位：年龄段红色斜体 */
        .palace-item.daxian-active .age-range {
            color: var(--color-star);
            font-style: italic;
        }
        .earthly-branch {
            font-size: calc(var(--cell-fs) * 0.95);
            font-weight: 400;
            font-family: "MiSans", sans-serif;
            color: var(--color-text);
            line-height: 1.2;
            text-align: center;
            max-width: 1.1em;
            word-break: break-all;
        }
        /* 三要宫（命宫/财帛宫/官禄宫）背景略深 */
        .palace-item.palace-key {
            background-color: var(--color-panel);
        }
        /* 当前大限宫位高亮 */
        .palace-item.daxian-active {
            background-color: #f6fbf8;
        }
        /* 流年命宫高亮 */
        .palace-item.ly-ming-gong {
            background-color: #fafdfc;
        }
        /* 大限命宫 + 流年命宫同宫时 */
        .palace-item.daxian-active.ly-ming-gong {
            background-color: #f6fbf8;
        }
        html[data-theme="dark"] .palace-item { background-color: var(--color-pan); }
        html[data-theme="dark"] .palace-item.palace-key { background-color: var(--color-panel); }
        html[data-theme="dark"] .palace-item.daxian-active { background-color: var(--color-daxian-active-bg); }
        html[data-theme="dark"] .palace-item.ly-ming-gong { background-color: var(--color-liunian-ming-bg); }
        html[data-theme="dark"] .palace-item.daxian-active.ly-ming-gong { background-color: var(--color-daxian-active-bg); }
        /* 流分命宫高亮（淡红背景 + 红色内框） */
        .palace-item.lf-ming-gong {
            box-shadow: inset 0 0 0 1px #999;
            background-color: var(--color-subtle);
        }
        html[data-theme="dark"] .palace-item.lf-ming-gong {
            box-shadow: inset 0 0 0 1px #666;
            background-color: var(--color-dark);
        }
        /* 流/小 年龄红色高亮（流年当年虚岁） */
        .age-hl { color: var(--color-star); font-weight: bold; }
        /* 命宫标记 */
        .soul-mark { font-size: 9px; color: var(--color-star); vertical-align: super; }
        /* 命宫宫位名称红色 */
        .pn-main.soul-name { color: var(--color-star); }
        /* 大限宫位名称绿色 */
        .pn-main.daxian-name { color: var(--color-positive); }
        /* 身宫标记 */
        .body-mark { font-size: 9px; color: var(--color-water); vertical-align: super; }
        /* 天干地支 + 身宫标记容器 */
        .ganzhi-area {
            display: flex;
            align-items: center;
            gap: 2px;
        }
        /* 身宫红牌（内联，紧贴天干地支左侧） */
        .sheng-mark {
            display: none;
            background: var(--color-star);
            color: var(--color-panel);
            font-size: var(--cell-fs-sm);
            font-weight: bold;
            border-radius: 3px;
            align-items: center;
            justify-content: center;
            padding: 1px 2px;
            line-height: 1.2;
        }
        .sheng-mark.active { display: inline-flex; }

        /* ========== 中宫样式 ========== */
        .middle-info {
            grid-column: 2 / 4;
            grid-row: 2 / 4;
            height: auto;
            overflow: hidden;
            background-color: var(--color-panel);
            border: none;
            font-size: 11px;
            line-height: 1.35;
            display: flex;
            flex-direction: column;
            gap: 4px;
            justify-content: flex-start;
            opacity: 1;
            position: relative;
            transition: none !important; /* 禁止 palace-item 的 transition 影响中宫 */
        }
        /* 中宫不参与宫格悬停动效 */
        .palace-item.middle-info:hover {
            transform: none;
            outline: none;
            z-index: auto;
        }
        #middle-wrap {
            display: flex;
            flex-direction: column;
            gap: 2px;
            width: 100%;
            transform-origin: top center;
            margin-left: 5px;
            margin-top: 5px;
        }
        .name-row {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            gap: 20px;
        }
        .name-row .left {
            font-size: 12px;
            color: var(--color-dark);
            font-weight: 500;
        }
        .name-row .right {
            font-size: 12px;
            color: var(--color-dark);
            font-weight: 500;
        }
        .base-row {
            font-size: 12px;
            color: var(--color-dark);
            font-weight: 500;
            line-height: 1.3;
        }
        .bazi-row {
            font-size: 16px;
            color: var(--color-dark);
            text-align: center;
            margin: 3px 0;
            font-weight: 500;
            letter-spacing: 2px;
        }
        .bazi-row::after {
            content: '';
            display: block;
            width: 40px;
            height: 2px;
            background: var(--color-gold);
            margin: 4px auto 0;
        }
        /* ── 八字四柱（中宫内）── */
        .bazi-wrapper { display: flex; justify-content: center; width: 100%; margin: 2px 0; }
        .bazi-wrapper.bazi-dual { gap: 14px; }
        .bazi-set { text-align: center; }
        .bazi-set-title { font-size: 8px; color: var(--color-star-sub); line-height: 1.4; }
        .bazi-pillars { display: flex; justify-content: center; gap: 0; }
        .bazi-pillar { display: flex; flex-direction: column; align-items: center; }
        .bazi-pillar-ss { font-size: 8px; color: var(--color-star-sub); line-height: 1.3; }
        .bazi-pillar-tg, .bazi-pillar-dz {
            font-size: 13px;
            font-weight: 700;
            line-height: 1.2;
        }
        /* 五行颜色 */
        .e-mu  { color: var(--color-wood); }
        .e-huo { color: var(--color-fire); }
        .e-tu  { color: var(--color-earth); }
        .e-jin { color: var(--color-metal); }
        .e-shui{ color: var(--color-water); }
        .bazi-qiyun { font-size: 9px; color: var(--color-text-sec); margin: 1px 0; text-align: center; }
        /* ── 八字大运（中宫内）── */
        .bz-dayun-row { display: flex; justify-content: center; gap: 2px; margin: 1px 0; overflow-x: auto; }
        .bz-dy-item {
            flex: 0 0 auto;
            min-width: 0;
            text-align: center;
            padding: 1px 3px;
        }
        .bz-dy-item.current-bz { background: var(--color-feixing-blue); border-color: var(--color-feixing-blue); }
        .bz-dy-item.current-bz .bz-dy-shishen,
        .bz-dy-item.current-bz .bz-dy-ay { color: var(--color-text-faint); }
        .bz-dy-item.current-bz .bz-dy-gz { color: var(--color-panel); }
        .bz-dy-shishen { font-size: 8px; color: var(--color-star-sub); line-height: 1.3; }
        .bz-dy-gz { font-size: 12px; font-weight: 700; color: var(--color-brand); line-height: 1.2; }
        .bz-dy-ay { font-size: 8px; color: var(--color-text-sec); line-height: 1.3; }
        /* 八字大运整体缩小，上移 */
        #bazi-dx-wrap { zoom: 0.96; margin-top: 34px; }
        /* ── 定盘调整按钮 ── */
        #dingpan-bar {
            display: grid;
            grid-template-columns: repeat(4, auto);
            justify-content: center;
            gap: 2px;
            margin: 3px 0 1px;
        }
        .dp-btn {
            flex: 0 0 auto;
            padding: 1px 3px;
            border: 1px solid var(--color-border);
            border-radius: 2px;
            background: var(--color-subtle);
            font-size: 9px;
            text-align: center;
            cursor: pointer;
            color: var(--color-text-sec);
            user-select: none;
            line-height: 1.3;
            transition: background 0.12s, border-color 0.12s;
        }
        .dp-btn:hover  { background: var(--color-btn-hover); border-color: var(--color-text-muted); }
        .dp-btn:active { background: var(--color-btn-hover); }

        /* ========== 侧边栏 ========== */
        .sidebar {
            width: 520px;
            flex-shrink: 0;
            background-color: var(--color-panel);
            border: 1px solid var(--color-star-sub);
            border-radius: 10px;
            padding: 12px 12px;
            box-shadow: none;
            overflow-y: auto;
            height: var(--grid-h);
            font-family: "Microsoft Yahei", sans-serif;
            font-size: 13px;
            opacity: 1;
            scrollbar-width: thin;
            scrollbar-color: #d5cfc6 transparent;
        }
        .sidebar::-webkit-scrollbar { width: 5px; }
        .sidebar::-webkit-scrollbar-track { background: transparent; }
        .sidebar::-webkit-scrollbar-thumb { background: #d5cfc6; border-radius: 3px; }
        .sidebar::-webkit-scrollbar-thumb:hover { background: #b0a090; }
        /* 玄微智能解析按钮 */
        .ai-analyze-btn {
            margin: 6px 0 8px 0;
            padding: 8px 16px;
            text-align: center;
            font-size: 13px;
            font-weight: 400;
            color: var(--color-gold);
            background: linear-gradient(135deg, #1a1a1a, #3a3028);
            border: 1px solid #5a4a30;
            border-radius: 6px;
            cursor: pointer;
            transition: background .2s, color .2s;
            user-select: none;
        }
        .ai-analyze-btn:hover { background: linear-gradient(135deg, #3a3028, #5a4a30); color: #f0d060; }
        .ai-analyze-result {
            margin: 4px 0 8px 0;
            padding: 10px;
            background: var(--color-parchment);
            border: 1px solid var(--color-border-warm);
            border-radius: 6px;
            font-size: 12px;
            color: #5a5045;
            line-height: 1.8;
            max-height: 400px;
            overflow-y: auto;
        }
        .sidebar .section {
            margin-bottom: 14px;
        }
        .sidebar .section:last-child {
            margin-bottom: 0;
        }
        .sidebar .section-title {
            font-size: 16px;
            font-weight: 700;
            font-family: "MiSans", sans-serif;
            color: var(--color-panel);
            padding: 6px 14px;
            border-radius: 6px;
            margin-bottom: 12px;
            display: inline-block;
            width: fit-content;
            opacity: 1;
            transition: transform 0.2s ease;
        }
        .sidebar .section-title:hover {
            transform: translateX(5px);
        }
        .sidebar .section-title.main-title,
        .sidebar .section-title.star-title,
        .sidebar .section-title.free-title {
            background-color: var(--color-brand);
        }
        .sidebar .section-title.phrase-title {
            background-color: var(--color-section-phrase-bg);
            margin-right: 8px;
            margin-bottom: 0;
        }
        .sidebar .section-title.free-title {
            font-size: 12px;
            padding: 5px 12px;
            margin-bottom: 0;
        }
        .sidebar .base-info .info-subtitle {
            font-size: 16px;
            font-weight: bold;
            color: var(--color-text);
            margin-bottom: 10px;
            line-height: 1.4;
        }
        .sidebar .base-info p {
            font-size: 12px;
            line-height: 1.8;
            color: var(--color-text);
            margin: 4px 0;
            transition: color 0.2s ease;
        }
        .sidebar .base-info p:hover {
            color: var(--color-water);
        }
        .sidebar .star-info .star-subtitle {
            font-size: 16px;
            font-weight: bold;
            color: #000000;
            margin-bottom: 10px;
            line-height: 1.4;
        }
        .sidebar .star-info p {
            font-size: 12px;
            line-height: 1.7;
            color: #212121;
            margin: 6px 0;
        }
        .sidebar .star-info p strong {
            font-weight: bold;
            color: #000000;
        }
        .sidebar .divider {
            width: 100%;
            border-top: 1px dashed var(--color-divider);
            margin-top: 18px;
        }
        .sidebar .phrase-header {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            flex-wrap: wrap;
        }
        .sidebar .phrase-content {
            font-size: 12px;
            line-height: 1.8;
            color: #212121;
        }
        .sidebar .phrase-content p {
            margin-bottom: 18px;
            position: relative;
            padding-left: 10px;
        }
        .sidebar .phrase-content p::before {
            content: '';
            position: absolute;
            left: 0;
            top: 8px;
            width: 4px;
            height: 4px;
            background: var(--color-section-phrase-bg);
            border-radius: 50%;
            transition: transform 0.3s ease;
        }
        .sidebar .phrase-content p:hover::before {
            transform: scale(1.5);
        }
        .sidebar .phrase-content p:last-child {
            margin-bottom: 0;
        }

        /* ========== 侧边栏动态组件 ========== */
        .sb-empty {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            color: var(--color-text-muted);
            font-size: 12px;
            text-align: center;
            line-height: 2.2;
        }
        .sb-palace-header {
            display: flex;
            align-items: baseline;
            flex-wrap: wrap;
            gap: 6px 10px;
            margin-bottom: 12px;
        }
        .sb-palace-name {
            font-size: 22px;
            font-weight: bold;
            color: var(--color-brand);
        }
        .sb-palace-ganzhi {
            font-size: 15px;
            color: var(--color-text-sec);
        }
        .sb-palace-marks { display: flex; gap: 5px; }
        .sb-mark {
            font-size: 11px;
            padding: 1px 6px;
            border-radius: 10px;
            font-weight: bold;
        }
        .sb-mark.soul { background: var(--color-mark-soul-bg); color: var(--color-star); border: 1px solid var(--color-tag-main-border); }
        .sb-mark.body { background: var(--color-mark-body-bg); color: var(--color-water); border: 1px solid var(--color-tag-aux-border); }
        /* 星曜标签 */
        .sb-star-group { margin-bottom: 12px; }
        .sb-star-group-label {
            font-size: 12px;
            color: var(--color-star-sub);
            font-weight: bold;
            border-left: 3px solid var(--color-water);
            padding-left: 6px;
            margin-bottom: 7px;
        }
        .sb-star-list { display: flex; flex-wrap: wrap; gap: 5px 6px; }
        .sb-star-tag {
            display: inline-flex;
            align-items: baseline;
            gap: 1px;
            padding: 3px 7px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: bold;
            line-height: 1.4;
            letter-spacing: -0.5px;
        }
        .sb-star-tag.t-main { background: var(--color-tag-main-bg); color: var(--color-star); border: 1px solid var(--color-tag-main-border); }
        .sb-star-tag.t-ji   { background: var(--color-tag-ji-bg); color: var(--color-purple); border: 1px solid var(--color-tag-ji-border); }
        .sb-star-tag.t-sha  { background: var(--color-tag-sha-bg); color: var(--color-text-sec); border: 1px solid var(--color-tag-sha-border); }
        .sb-star-tag.t-aux  { background: var(--color-tag-aux-bg); color: var(--color-water); border: 1px solid var(--color-tag-aux-border); }
        .sb-star-tag.t-run  { background: var(--color-tag-run-bg); color: var(--color-positive); border: 1px solid var(--color-tag-run-border); font-style: italic; }
        .sb-star-tag .st-status { font-size: 11px; color: var(--color-text-muted); font-weight: normal; margin-left: 1px; }
        .sb-star-tag .st-sihua  { font-size: 12px; color: var(--color-star); font-weight: bold; margin-left: 1px; }

        /* 十二宫总览：每个宫位的蓝色标题行 */
        .sb-palace-block {
            margin-bottom: 4px;
        }
        .sb-palace-title-row {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
        }
        .sb-palace-block-title {
            display: inline-block;
            font-size: 16px;
            font-weight: 700;
            font-family: "MiSans", sans-serif;
            color: var(--color-panel);
            background-color: var(--color-water);
            padding: 5px 12px;
            border-radius: 4px;
            line-height: 1.4;
        }
        .sb-palace-block-gz {
            font-size: 13px;
            color: var(--color-panel);
            font-weight: normal;
        }
        /* 十二宫总览 命/身标记 */
        #sb-all-palaces .sb-star-group-label .ap-mark {
            font-size: 10px;
            padding: 0 4px;
            border-radius: 3px;
            font-weight: bold;
            margin-left: 4px;
        }
        .ap-mark-body {
            display: inline-block;
            background: var(--color-water);
            color: var(--color-panel);
            font-size: 13px;
            font-weight: 700;
            padding: 5px 10px;
            border-radius: 4px;
        }

        /* 六线布局 */
        .line-pair {
            display: flex;
            flex-direction: column;
            gap: 3px;
        }
        .line-side {
            display: flex;
            align-items: flex-start;
            gap: 4px;
        }
        .line-tag {
            font-size: 11px;
            color: var(--color-text-muted);
            font-weight: bold;
            min-width: 1em;
            padding-top: 3px;
        }
        .line-stars {
            display: flex;
            flex-wrap: wrap;
            gap: 2px 4px;
        }

        /* 命盘格局 */
        .sb-pattern-group { margin-bottom: 8px; }
        .sb-pattern-tag {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 3px;
            font-size: 12px;
            font-weight: bold;
            margin: 2px 4px 2px 0;
        }
        .sb-pattern-ji-tag { background: var(--color-pattern-ji-bg); color: #c07000; border: 1px solid #f0d080; }
        .sb-pattern-xiong-tag { background: var(--color-pattern-xiong-bg); color: var(--color-danger); border: 1px solid #f0c0c0; }


        /* 今日农历日期时间（子导航栏右侧） */
        .lunar-now-nav {
            margin-left: auto;
            font-size: 12px;
            color: var(--color-text-sec);
            font-family: "MiSans", sans-serif;
            font-weight: 300;
            white-space: nowrap;
            padding-right: 4px;
        }

        .tags-wrapper {
            display: flex;
            width: var(--grid-h);
            margin-top: 12px;
            margin-bottom: 12px;
            margin-left: 0;
            opacity: 1;
        }
        /* ── 流月/流日/流时 三排选择行 ── */
        .flow-selector-rows {
            width: var(--grid-h);
            margin-top: 5px;
            margin-bottom: 2px;
            margin-left: 0;
            display: none;
            flex-direction: column;
            gap: 3px;
        }
        .flow-row {
            display: flex;
            align-items: center;
            gap: 3px;
        }
        .flow-row-label {
            font-size: 11px;
            color: var(--color-star-sub);
            white-space: nowrap;
            width: 26px;
            flex-shrink: 0;
            font-family: "MiSans", sans-serif;
        }
        .flow-btns-viewport {
            flex: 1;
            overflow-x: auto;
            overflow-y: hidden;
            scrollbar-width: none;
        }
        .flow-btns-viewport::-webkit-scrollbar { display: none; }
        .flow-btns {
            display: flex;
            gap: 2px;
            padding: 1px 0;
        }
        /* 流月/流日/流时：换行显示全部，不滚动 */
        #flowMonthRow, #flowDayRow, #flowHourRow { align-items: flex-start; }
        #vpFlowMonth, #vpFlowDay, #vpFlowHour { overflow: visible; }
        #flowMonthBtns, #flowDayBtns, #flowHourBtns { flex-wrap: wrap; }
        .flow-btn {
            flex-shrink: 0;
            padding: 1px 5px;
            font-size: 11px;
            border: 1px solid #d0d0d0;
            border-radius: 3px;
            background: #fff;
            cursor: pointer;
            color: var(--color-text);
            font-family: "MiSans", sans-serif;
            white-space: nowrap;
            line-height: 1.6;
            transition: background 0.12s, color 0.12s, border-color 0.12s;
        }
        .flow-btn:hover { border-color: var(--color-brand); color: var(--color-brand); }
        .flow-btn.flow-active { background: var(--color-brand); color: var(--color-panel); border-color: var(--color-brand); }
        .pattern-tags {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 2px 4px;
            background-color: transparent;
            align-items: center;
            width: 100%;
        }
        .tag {
            padding: 3px 12px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 400;
            font-family: "MiSans", sans-serif;
            white-space: nowrap;
            line-height: 1.15;
            height: 24px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
        }
        .tag.blue-solid {
            background: var(--color-brand);
            color: #fff;
            border: none;
        }
        .tag.blue-solid:hover { opacity: 0.9; }
        .tag.plain {
            background: var(--color-subtle);
            color: var(--color-text);
            border: 1px solid var(--color-border);
        }
        .tag.plain:hover {
            background: #e5e5e5;
        }


        /* ========== 运星叠加 / 四化层叠 / 宫位子名称 ========== */
        /* 运星叠加区（右对齐，垂直居中于宫格中部） */
        .running-stars {
            position: absolute;
            right: 4px;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            flex-direction: row;
            gap: 3px;
            align-items: flex-start;
            z-index: 5;
            pointer-events: none;
        }
        .rs-col {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            justify-content: center;
            flex-wrap: wrap;
            gap: 2px;
            font-size: 9px;
            font-weight: bold;
            overflow: hidden;
        }
        .rs-col span {
            display: flex;
            flex-direction: column;
            align-items: center;
            line-height: 1.1;
            text-align: center;
        }
        .rs-dx { color: #0074e5; }
        .rs-ly { color: var(--color-positive); }
        .rs-xl { color: var(--color-star-sub);    }

        .sihua-placeholder {
            font-size: calc(var(--cell-fs-sm) * 0.95);
            line-height: 1.1;
            padding: 0 1px;
            border: 1px solid transparent;
            border-radius: 2px;
            visibility: hidden;
            display: block;
        }
        /* 左侧四化层叠标签（旧方式，已废弃，保留以防万一） */
        .sihua-layers {
            position: absolute;
            left: 2px;
            top: calc(var(--cell-h) * 0.42);
            display: flex;
            flex-direction: column;
            gap: 1px;
            z-index: 3;
            pointer-events: none;
        }
        .sh-tag {
            font-size: calc(var(--cell-fs-sm) * 0.95);
            font-weight: bold;
            border-radius: 2px;
            line-height: 1.2;
            display: block;
            text-align: center;
            padding: 0 2px;
            color: #fff;
        }
        .sh-natal       { font-size: var(--cell-fs-sm); font-weight: 700; }
        .sh-natal-lu    { background: var(--color-positive); }
        .sh-natal-quan  { background: var(--color-purple); }
        .sh-natal-ke    { background: var(--color-brand); }
        .sh-natal-ji    { background: var(--color-fire); }
        .sh-dx          { font-size: var(--cell-fs-sm); font-weight: 700; background: var(--color-star); }
        .sh-ly          { font-size: var(--cell-fs-sm); font-weight: 700; background: var(--color-star-aux); }
        .sh-xl    { background: var(--color-text-muted); }
        .sh-lm    { background: var(--color-star-sha); }
        .sh-ld    { background: var(--color-star-misc); }
        .sh-lh    { background: var(--color-text-sec); }
        /* 流月/流日/流时 运星颜色 */
        .rs-lm { color: #c07000; }
        .rs-ld { color: #8B4513; }
        .rs-lh { color: var(--color-text-sec);    }
        /* 中宫快捷按钮 */
        .quick-btns {
            display: flex;
            justify-content: center;
            gap: 4px;
            padding: 4px 8px;
            flex-wrap: wrap;
        }
        .qcol {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1px;
        }
        .qgz {
            font-size: 8px;
            line-height: 1.2;
            text-align: center;
            font-family: "MiSans", sans-serif;
            font-weight: 300;
        }
        .qgz-year  { color: var(--color-positive); }
        .qgz-month { color: #c07000; }
        .qgz-day   { color: #8B4513; }
        .qgz-hour  { color: var(--color-text-sec);    }
        .qbtn {
            width: 17px;
            height: 17px;
            border-radius: 50%;
            border: 1.5px solid #bbb;
            background: var(--color-panel);
            color: var(--color-text-sec);
            font-size: 9px;
            font-weight: 700;
            line-height: 1;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            transition: all 0.15s;
        }
        .qbtn:hover { border-color: var(--color-star-sub); background: #f0f0f0; }
        .qbtn.q-year.active  { background: #e6f9e6; border-color: var(--color-positive); color: var(--color-positive); }
        .qbtn.q-month.active { background: #fff3e0; border-color: #c07000; color: #c07000; }
        .qbtn.q-day.active   { background: #faf0e6; border-color: #8B4513; color: #8B4513; }
        .qbtn.q-hour.active  { background: #f0f0f0; border-color: var(--color-text-sec);    color: var(--color-text-sec);    }
        .qbtn.q-min.active   { background: #1a1a1a; border: none; color: var(--color-gold); }
        .qbtn.q-min { background: #1a1a1a; color: var(--color-gold); border: none; border-radius: 15px; cursor: pointer; opacity: 1; }
        .qbtn.q-now { border-color: var(--color-danger); color: var(--color-danger); font-size: 8px; }
        .qbtn.q-now:hover { background: #fdf0ef; border-color: var(--color-danger); }
        .qbtn.q-vip {
            width: 34px; height: 24px;
            border: none;
            background: #1a1a1a;
            color: var(--color-gold);
            font-size: 12px;
            font-weight: 800;
            cursor: pointer;
            border-radius: 15px;
            font-family: 'Proza', 'MiSans', sans-serif;
        }
        .qbtn.q-vip:hover { background: #2a2a2a; color: #f0d060; }
        .qbtn.q-vip.q-vip-active { background: var(--color-gold); color: var(--color-dark); font-size: 10px; }


        /* 宫位子名称（大命/流命/小命等，2字竖排） */
        .sub-name-dx { font-size: var(--cell-fs); color: var(--color-positive); font-weight: 400; font-family: "MiSans", sans-serif; line-height: 1.1; text-align: center; display: block; }
        .sub-name-ly { font-size: var(--cell-fs); color: #8b4513; font-weight: 400; font-family: "MiSans", sans-serif; line-height: 1.1; text-align: center; display: block; }
        .sub-name-xl { font-size: var(--cell-fs); color: #0074e5; font-weight: 400; font-family: "MiSans", sans-serif; line-height: 1.1; text-align: center; display: block; }
        .sub-name-lm { font-size: var(--cell-fs); color: #c07000; font-weight: 400; font-family: "MiSans", sans-serif; line-height: 1.1; text-align: center; display: block; }
        .sub-name-ld { font-size: var(--cell-fs); color: #8B4513; font-weight: 400; font-family: "MiSans", sans-serif; line-height: 1.1; text-align: center; display: block; }
        .sub-name-lh { font-size: var(--cell-fs); color: var(--color-text-sec);    font-weight: 400; font-family: "MiSans", sans-serif; line-height: 1.1; text-align: center; display: block; }
        /* age-range 随子宫名数量自适应缩小 */
        .palace-item[data-sub-count="4"] .age-range { font-size: calc(var(--cell-fs) * 0.78); }
        .palace-item[data-sub-count="5"] .age-range { font-size: calc(var(--cell-fs) * 0.65); }
        .palace-item[data-sub-count="6"] .age-range { font-size: calc(var(--cell-fs) * 0.55); }

        /* 流年选中年份高亮 */
        /* ===== 八字排盘输入横条 ===== */
        #bazi-input-bar {
            background: #fff;
            border-radius: 8px;
            padding: 8px 14px;
            margin-bottom: 10px;
            box-shadow: 0 1px 4px rgba(0,0,0,0.06);
            font-size: 12px;
            color: var(--color-text);
        }
        .bz-bar-wrap {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 4px 8px;
        }
        .bz-bar-title {
            font-size: 12px;
            font-weight: bold;
            color: var(--color-brand);
            margin-right: 6px;
            white-space: nowrap;
        }
        #bazi-input-bar label { color: var(--color-text-sec); }
        #bazi-input-bar input[type="number"],
        #bazi-input-bar input[type="text"] {
            padding: 3px 5px;
            border: 1px solid var(--color-border);
            border-radius: 3px;
            font-size: 12px;
            text-align: center;
            color: #222;
            background: #fff;
        }
        #bazi-input-bar input[type="number"] { width: 46px; }
        #bazi-input-bar #bzName            { width: 80px; text-align: left; }
        #bazi-input-bar input[type="radio"] { accent-color: var(--color-brand); }
        .bz-cal-btn {
            padding: 2px 8px;
            border: 1px solid var(--color-border);
            border-radius: 3px;
            background: #fff;
            font-size: 12px;
            cursor: pointer;
            color: var(--color-text-sec);
        }
        .bz-cal-btn.active { background: var(--color-brand); color: #fff; border-color: var(--color-brand); }
        .bz-btn-gen {
            background: var(--color-gold);
            color: var(--color-brand);
            border: none;
            border-radius: 4px;
            padding: 4px 14px;
            font-size: 12px;
            font-weight: bold;
            cursor: pointer;
        }
        .bz-btn-gen:hover { background: #f0cb50; }
        .bz-btn-sec {
            background: #fff;
            color: var(--color-text-sec);
            border: 1px solid var(--color-border);
            border-radius: 4px;
            padding: 4px 10px;
            font-size: 12px;
            cursor: pointer;
        }
        .bz-btn-sec:hover { background: var(--color-subtle); }

        /* ===== 建设中占位页 ===== */
        .wip-content {
            text-align: center;
            padding: 100px 20px;
        }
        .wip-title {
            font-size: 24px;
            font-weight: bold;
            color: var(--color-brand);
            letter-spacing: 4px;
            margin-bottom: 16px;
        }
        .wip-desc {
            font-size: 12px;
            color: var(--color-text-faint);
            letter-spacing: 2px;
        }


    .toast {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(0,0,0,0.75);
        color: #fff;
        padding: 8px 24px;
        border-radius: 6px;
        font-size: 12px;
        z-index: 10001;
        display: none;
    }

    #auth-modal {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.55);
        z-index: 10000;
        align-items: center;
        justify-content: center;
    }
    #auth-modal.active { display: flex; }
    .auth-box {
        background: var(--color-panel);
        border-radius: 12px;
        width: 380px;
        max-width: calc(100vw - 32px);
        padding: 28px 28px 20px;
        box-shadow: 0 20px 60px rgba(0,0,0,0.3);
        position: relative;
        animation: fadeInUp 0.25s ease;
    }
    .auth-close {
        position: absolute;
        top: 14px; right: 16px;
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
        color: var(--color-text-faint);
        border: none;
        background: none;
        padding: 0;
    }
    .auth-close:hover { color: var(--color-text); }
    .auth-tabs {
        display: flex;
        border-bottom: 2px solid var(--color-border-light);
        margin-bottom: 20px;
    }
    .auth-tab {
        flex: 1;
        text-align: center;
        padding: 8px 0;
        font-size: 12px;
        font-family: "MiSans", sans-serif;
        font-weight: 700;
        cursor: pointer;
        color: #bbb;
        border-bottom: 2px solid transparent;
        margin-bottom: -2px;
        transition: all 0.2s;
    }
    .auth-tab.active { color: #8B4513; border-bottom-color: #8B4513; }
    .auth-panel { display: none; }
    .auth-panel.active { display: block; }
    .auth-sub-tabs {
        display: flex;
        gap: 8px;
        margin-bottom: 16px;
    }
    .auth-sub-tab {
        padding: 4px 14px;
        border-radius: 20px;
        font-size: 12px;
        font-family: "MiSans", sans-serif;
        font-weight: 700;
        cursor: pointer;
        color: var(--color-star-sub);
        border: 1px solid var(--color-border);
        background: none;
        transition: all 0.2s;
    }
    .auth-sub-tab.active { background: #8B4513; color: #fff; border-color: #8B4513; }
    .auth-form-group { margin-bottom: 12px; }
    .auth-form-group input {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid var(--color-border);
        border-radius: 6px;
        font-size: 12px;
        font-family: "MiSans", sans-serif;
        outline: none;
        box-sizing: border-box;
        transition: border-color 0.2s;
    }
    .auth-form-group input:focus { border-color: #8B4513; }
    .auth-code-row { display: flex; gap: 8px; align-items: center; }
    .auth-code-row input { flex: 1; }
    .auth-btn-code {
        flex-shrink: 0;
        white-space: nowrap;
        padding: 10px 10px;
        background: #8B4513;
        color: #fff;
        border: none;
        border-radius: 6px;
        font-size: 12px;
        font-family: "MiSans", sans-serif;
        font-weight: 700;
        cursor: pointer;
        transition: opacity 0.2s;
    }
    .auth-btn-code:disabled { opacity: 0.5; cursor: default; }
    .auth-btn-submit {
        width: 100%;
        padding: 12px;
        background: linear-gradient(135deg, #8B4513, #A0522D);
        color: #fff;
        border: none;
        border-radius: 6px;
        font-size: 15px;
        font-family: "MiSans", sans-serif;
        font-weight: 700;
        cursor: pointer;
        transition: opacity 0.2s;
        margin-top: 4px;
    }
    .auth-btn-submit:hover { opacity: 0.88; }
    .auth-divider {
        text-align: center;
        color: var(--color-text-faint);
        font-size: 12px;
        margin: 14px 0 12px;
        position: relative;
    }
    .auth-divider::before, .auth-divider::after {
        content: '';
        position: absolute;
        top: 50%;
        width: 38%;
        height: 1px;
        background: var(--color-border-light);
    }
    .auth-divider::before { left: 0; }
    .auth-divider::after  { right: 0; }
    .auth-btn-wechat {
        width: 100%;
        padding: 10px;
        background: #f7f7f7;
        color: var(--color-text-faint);
        border: 1px solid #e0e0e0;
        border-radius: 6px;
        font-size: 13px;
        font-family: "MiSans", sans-serif;
        font-weight: 600;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }
    .auth-btn-wechat:hover { background: #f0f0f0; }

/* ── 手机宫位弹窗（默认隐藏，具体样式由 paipan-mob.css 提供）── */
.mobile-overlay { display: none; }
.mobile-bottom-sheet { transform: translateY(100%); }

/* ── 设置弹窗 ──────────────────────────────────── */
#ziweiSettingsModal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 10001;
    align-items: center;
    justify-content: center;
}
#ziweiSettingsModal.show { display: flex; }

.modal-close {
    position: absolute;
    top: 14px; right: 16px;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: var(--color-text-faint);
    border: none;
    background: none;
    padding: 0;
    z-index: 1;
}
.modal-close:hover { color: var(--color-text); }

.zw-settings-modal {
    background: var(--color-panel);
    border-radius: 12px;
    width: 560px;
    max-width: calc(100vw - 32px);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    position: relative;
    animation: fadeInUp 0.25s ease;
}
.zw-settings-header {
    padding: 20px 28px 0;
    flex-shrink: 0;
}
.zw-settings-header h2 {
    font-size: 18px;
    font-family: "MiSans", sans-serif;
    font-weight: 700;
    margin: 0 0 16px;
    color: #1d2846;
}
.zw-settings-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 28px;
}
.settings-section {
    font-size: 14px;
    font-family: "MiSans", sans-serif;
    font-weight: 600;
    color: #1d2846;
    margin: 16px 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--color-border-light);
}
.settings-tip {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-bottom: 12px;
}

/* ── 折叠面板 ── */
.zw-section {
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    margin-bottom: 8px;
    overflow: hidden;
}
.zw-section[open] { border-color: var(--color-gold); }
.zw-section-title {
    padding: 10px 14px;
    font-size: 13px;
    font-family: "MiSans", sans-serif;
    font-weight: 600;
    color: #1d2846;
    cursor: pointer;
    background: #f8f9fb;
    list-style: none;
    display: flex;
    align-items: center;
    user-select: none;
}
.zw-section-title::-webkit-details-marker { display: none; }
.zw-section-title::marker { display: none; content: ''; }
.zw-section-title::before {
    content: '▶';
    display: inline-block;
    margin-right: 8px;
    font-size: 10px;
    transition: transform 0.2s;
    color: var(--color-text-muted);
}
.zw-section[open] > .zw-section-title::before { transform: rotate(90deg); }
.zw-section[open] > .zw-section-title { background: #f0edf5; color: var(--color-gold); }
.zw-section-content {
    padding: 10px 14px 14px;
}

/* ── 设置行 ── */
.zw-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 0;
    border-bottom: 1px solid #f5f5f5;
    gap: 12px;
}
.zw-row:last-child { border-bottom: none; }
.zw-row-label {
    font-size: 12px;
    font-family: "MiSans", sans-serif;
    color: var(--color-text);
    flex: 1;
    line-height: 1.4;
}
.zw-section-desc {
    font-size: 11px;
    color: var(--color-text-muted);
    padding: 2px 0 6px;
}

/* ── 开关按钮 Toggle Switch ── */
.zw-toggle {
    display: inline-block;
    cursor: pointer;
    flex-shrink: 0;
}
.zw-toggle input { display: none; }
.zw-toggle-sw {
    display: inline-block;
    width: 40px;
    height: 22px;
    background: var(--color-border);
    border-radius: 11px;
    position: relative;
    transition: background 0.2s;
    vertical-align: middle;
}
.zw-toggle-sw::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    top: 2px;
    left: 2px;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.zw-toggle input:checked + .zw-toggle-sw { background: var(--color-gold); }
.zw-toggle input:checked + .zw-toggle-sw::before { transform: translateX(18px); }

/* ── 分段按钮组 ── */
.zw-segmented {
    display: inline-flex;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
}
.zw-seg-btn {
    padding: 4px 10px;
    font-size: 11px;
    font-family: "MiSans", sans-serif;
    background: #fff;
    color: var(--color-text-sec);
    border: none;
    border-right: 1px solid var(--color-border);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.zw-seg-btn:last-child { border-right: none; }
.zw-seg-btn:hover { background: #f0edf5; }
.zw-seg-btn.active {
    background: #1A3D63;
    color: #fff;
}
.zw-seg-btn.active:hover { background: #1A3D63; }
.zw-seg-btn:disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }

/* ── 内联复选框组 ── */
.zw-inline-toggles {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex-shrink: 0;
    text-align: right;
}
.zw-chk {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    font-size: 11px;
    font-family: "MiSans", sans-serif;
    color: var(--color-text-sec);
    justify-content: flex-end;
}
.zw-chk input[type="checkbox"] { margin: 0; }

/* ── 四化表 ── */
.sihua-settings-table {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sihua-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: #f8f9fb;
    border-radius: 8px;
    border: 1px solid var(--color-border-light);
    flex-wrap: wrap;
}
.sihua-tg {
    font-size: 14px;
    font-family: "MiSans", sans-serif;
    font-weight: 700;
    color: var(--color-gold);
    min-width: 2em;
    text-align: center;
    flex-shrink: 0;
}
.sihua-opt {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    font-family: "MiSans", sans-serif;
    border: 1px solid transparent;
    transition: all 0.15s;
    white-space: nowrap;
}
.sihua-opt:hover { background: #eef1f6; }
.sihua-opt.active {
    background: #e8edf5;
    border-color: var(--color-gold);
}
.sihua-opt input[type="radio"] { display: none; }
.sihua-label { color: var(--color-text-sec); }
.sihua-opt.active .sihua-label { color: #1d2846; font-weight: 600; }

.settings-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 28px 18px;
    border-top: 1px solid var(--color-border-light);
    flex-shrink: 0;
}

/* ── 配置码 ── */
.zw-config-code {
    padding: 12px 28px;
    border-top: 1px solid var(--color-border-light);
    flex-shrink: 0;
}
.zw-config-label {
    font-size: 13px;
    font-family: "MiSans", sans-serif;
    font-weight: 600;
    color: #1d2846;
    margin-bottom: 8px;
}
.zw-config-row {
    display: flex;
    gap: 6px;
    align-items: center;
}
.zw-config-input {
    flex: 1;
    padding: 5px 8px;
    font-size: 13px;
    font-family: "Courier New", monospace;
    letter-spacing: 2px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    color: var(--color-text);
    background: #f8f9fb;
    min-width: 0;
}
.zw-config-input:focus { outline: none; border-color: var(--color-gold); }
.zw-config-btn {
    padding: 5px 12px;
    font-size: 11px;
    flex-shrink: 0;
}
.zw-config-tip {
    font-size: 10px;
    color: var(--color-text-muted);
    margin-top: 6px;
}

/* ── 设置弹窗移动端适配 ── */
@media (max-width: 768px) {
    .zw-settings-modal {
        width: 100%;
        max-width: 100%;
        height: 100%;
        border-radius: 0;
        margin: 0;
        overflow-y: auto;
    }
    .zw-settings-header {
        padding: 14px 16px 0;
        flex-shrink: 0;
    }
    .zw-settings-header h2 { font-size: 16px; margin: 0 0 10px; }
    .zw-settings-body {
        padding: 0 12px;
        flex: none;
        overflow-y: visible;
    }
    .zw-section-title { font-size: 12px; padding: 9px 10px; }
    .zw-section-content { padding: 8px 10px 10px; }
    .zw-row { padding: 6px 0; gap: 8px; }
    .zw-row-label { font-size: 11px; }
    .zw-seg-btn { padding: 3px 7px; font-size: 10px; }
    .zw-toggle-sw { width: 34px; height: 19px; border-radius: 9.5px; }
    .zw-toggle-sw::before { width: 15px; height: 15px; top: 2px; left: 2px; }
    .zw-toggle input:checked + .zw-toggle-sw::before { transform: translateX(15px); }
    .sihua-row { padding: 6px 8px; gap: 4px; }
    .sihua-tg { font-size: 12px; min-width: 1.5em; }
    .sihua-opt { padding: 3px 5px; font-size: 10px; }
    .settings-actions { padding: 10px 16px max(14px, env(safe-area-inset-bottom, 14px)); }
    .modal-close { top: 10px; right: 12px; font-size: 20px; }
    .zw-config-code { padding: 10px 16px; }
    .zw-config-input { font-size: 12px; letter-spacing: 1px; }
    .zw-config-btn { padding: 4px 8px; font-size: 10px; }
}


/* ════════════════════════════════════════════
   从 HTML 内联 style 迁移
   基础状态选择器，由 web/mob CSS 按需覆盖
   ════════════════════════════════════════════ */

/* ── 真太阳时控件 ── */
#ztyLabel {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    font-family: 'MiSans', sans-serif;
    font-weight: 400;
}
#ztyCity {
    display: none;
    font-size: 12px;
    padding: 2px 4px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    max-width: 100px;
    font-family: 'MiSans', sans-serif;
}

/* ── 派别切换栏 ── */
#pai-switch-bar {
    display: flex;
    justify-content: center;
    gap: 3px;
    margin-top: auto;
    flex-shrink: 0;
}
#pai-switch-bar button {
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid var(--color-feixing-blue);
    border-radius: 3px;
    background: var(--color-panel);
    color: var(--color-feixing-blue);
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
}
#pai-switch-bar button.active {
    background: var(--color-feixing-blue);
    color: var(--color-panel);
    cursor: default;
}

/* ── 中宫辅助行 ── */
#center-lunar {
    text-align: center;
    font-size: 11px;
    color: var(--color-star-sub);
    margin-top: 4px;
}
#center-date {
    line-height: 1.5;
}

/* ── 认证按钮 ── */
#authButtons span {
    cursor: pointer;
}

/* ── 子导航返回链接 ── */
.chart-subnav a {
    color: var(--accent-gold);
}

/* ── 侧边栏空状态 ── */
.sb-empty > div {
    font-size: 28px;
    margin-bottom: 8px;
    opacity: 0.25;
}
.sb-empty > p {
    font-size: 13px;
    color: #bbb;
}

/* ── 默认隐藏（JS 按需 .show()）── */
#bazi-input-bar  { display: none; }
#bazi-frame      { display: none; }
#wip-panel       { display: none; }
#aiAnalyzeResult { display: none; }
#sb-content      { display: none; }
#sb-dx-section   { display: none; }
#sb-ly-section   { display: none; }
#login-code-form { display: none; }
#flowDayRow      { display: none; }
#flowHourRow     { display: none; }

/* ── 认证区域链接 ── */
#authButtons a { cursor: pointer; text-decoration: none; }

/* ════════════════════════════════════════════
   公共模块（从 web/mob CSS 提取，所有模式共享）
   ════════════════════════════════════════════ */


@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Toast ── */
.toast2 { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.9); color: #fff; padding: 8px 24px; border-radius: 6px; font-size: 14px; z-index: 10001; display: none; pointer-events: none; text-align: center; }
.toast2 small { color: var(--color-text-faint); font-size: 12px; }

#sb-empty { display: none; }

/* ── 备案号 ── */


/* ── 中宫"我"按钮（JS 生成）── */
.center-me-btn {
    width: 22px; height: 22px;
    border: 1px solid var(--color-danger);
    border-radius: 50%;
    background: #fff;
    color: var(--color-danger);
    font-size: 11px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    font-weight: bold;
    flex-shrink: 0;
    margin-right: 20px;
}

/* ── 中宫标题行（补 flex 布局）── */
.center-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ── 中宫副标题行 ── */
.center-sub {
    margin-top: 3px;
}


/* ── 侧边栏 / 弹窗辅助类 ── */
.sb-ganzhi { font-weight: normal; font-size: 14px; color: var(--color-text-muted); }
.sb-info-line { color: var(--color-text-muted); font-size: 12px; margin: 0 0 12px; }
.sb-boshi-line { color: var(--color-text-sec); font-size: 12px; margin-top: 4px; }
.sb-flow-line { color: var(--color-positive); font-size: 12px; margin-top: 4px; }
.sb-boshi-detail { font-size: 13px; color: var(--color-text-sec); line-height: 2; }
.sb-empty-note { color: var(--color-text-faint); font-size: 12px; padding: 4px 0; }
.sb-empty-dash { color: var(--color-text-faint); font-size: 12px; }

/* ── 分隔线 ── */
.divider { margin: 8px 0; }

.center-wxju { font-weight: 300; color: var(--color-star-sub); }

/* ── VIP 功能弹窗 ── */
    .vip-item { flex-direction: column; align-items: flex-start; gap: 8px; }
    .vip-item-right { flex-direction: row; align-items: center; gap: 10px; width: 100%; justify-content: flex-end; }
}

/* ════════════════════════════════════════
   紧凑型限流选择器（移动端）
   ════════════════════════════════════════ */
.cp-flow-bar {
    display: flex; gap: 4px; justify-content: center;
    margin: 6px auto 0; max-width: calc(var(--grid-h) + 60px);
    padding: 0 4px;
}
.cp-btn {
    flex: 1 1 auto; min-width: 90px; max-width: 180px;
    padding: 5px 8px; font-size: 11px; font-family: "MiSans", sans-serif;
    border: 1px solid var(--color-border); border-radius: 4px; background: #fff;
    cursor: pointer; text-align: center; line-height: 1.3;
    transition: all .15s; white-space: nowrap;
}
.cp-btn:hover { border-color: var(--color-brand); }
.cp-btn.disabled { opacity: 0.35; cursor: not-allowed; border-color: var(--color-border); }
.cp-btn.disabled:hover { border-color: var(--color-border); }
.cp-dx { border-color: #222; color: #222; }
.cp-lm { border-color: #e07800; color: #e07800; }
.cp-lh { border-color: #0d9ec8; color: #0d9ec8; }
.cp-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.35); z-index: 1100;
}
.cp-overlay.active { display: block; }
.cp-popup {
    display: none; position: fixed; bottom: 0; left: 50%;
    transform: translateX(-50%); width: 420px; max-width: 100vw;
    background: var(--color-pan); z-index: 1101;
    border: 1px solid var(--color-brand);
    border-radius: 14px 14px 0 0; box-shadow: 0 -4px 24px rgba(0,0,0,.12);
    overflow: hidden; flex-direction: column;
}
.cp-popup.active { display: flex; }
.cp-popup-header {
    padding: 12px 16px 8px; font-size: 15px; font-weight: 700;
    text-align: center; border-bottom: 1px solid var(--color-border-light); flex-shrink: 0; color: var(--color-text);
}
.cp-pick-content {
    display: flex; position: relative; height: 256px; overflow: hidden;
}
.cp-pick-content::before,
.cp-pick-content::after {
    content: ""; position: absolute; left: 0; width: 100%; height: 96px; z-index: 2; pointer-events: none;
}
.cp-pick-content::before {
    top: 0;
    background: linear-gradient(to bottom, #fff 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 100%);
}
.cp-pick-content::after {
    bottom: 0;
    background: linear-gradient(to top, #fff 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 100%);
}
.cp-pick-highlight {
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 100%; height: 64px;
    background: rgba(232,232,255,.5);
    border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
    z-index: 1; pointer-events: none;
}
.cp-pick-highlight::before,
.cp-pick-highlight::after {
    content: "│"; position: absolute; top: 50%; transform: translateY(-50%);
    font-size: 20px; color: #bbb; line-height: 1;
}
.cp-pick-highlight::before { left: 8px; }
.cp-pick-highlight::after  { right: 8px; }
.cp-pick-col { flex: 1; height: 100%; position: relative; overflow: hidden; }
.cp-pick-list {
    transition: transform 0.1s ease-out;
    padding-top: 96px; padding-bottom: 96px;
}
.cp-pick-item {
    height: 64px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 17px; color: var(--color-text); font-family: "MiSans", sans-serif; font-weight: 400;
    white-space: nowrap; padding: 4px 10px; border-radius: 4px;
    background: var(--color-pan); border: 1px solid var(--color-border-warm);
}
.cp-pick-btns { display: flex; border-top: 1px solid var(--color-border); }
.cp-pick-btn {
    flex: 1; height: 50px; border: none; background: #fff;
    font-size: 18px; cursor: pointer; font-family: "MiSans", sans-serif;
}
.cp-pick-btn.cancel { color: var(--color-star-sub); border-right: 1px solid var(--color-border); }
.cp-pick-btn.confirm { color: var(--color-brand); }
.cp-pick-btn:active { background: #f0f0f0; }

/* 按钮组 + 箭头 */
.cp-btn-group {
    display: flex; gap: 2px; align-items: stretch;
    flex: 1 1 auto; min-width: 90px; max-width: 180px;
}
.cp-btn-group .cp-btn {
    flex: 1; min-width: 0;
}
.cp-arrows {
    display: flex; flex-direction: column; gap: 1px;
    flex-shrink: 0; width: 22px;
}
.cp-arr {
    flex: 1; min-height: 0;
    border: 1px solid var(--color-border); border-radius: 3px;
    background: var(--color-subtle); color: var(--color-text-sec);
    font-size: 9px; padding: 0; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.cp-arr.disabled { opacity: 0.35; cursor: not-allowed; }

/* ════════════════════════════════════════
   暗色主题 — ziwei 专用
   ════════════════════════════════════════ */

/* ── 宫位内：宫名、天干地支、年龄 ── */
html[data-theme="dark"] .palace-name,
html[data-theme="dark"] .pn-main,
html[data-theme="dark"] .pn-main.soul-name,
html[data-theme="dark"] .pn-main.daxian-name { color: var(--color-text-sec); }
html[data-theme="dark"] .age-range,
html[data-theme="dark"] .age-hl,
html[data-theme="dark"] .earthly-branch { color: var(--color-text-muted); }
html[data-theme="dark"] .soul-mark { color: var(--color-star); }
html[data-theme="dark"] .body-mark { color: var(--color-star-misc); }

/* ── 流/小限数字 ── */
html[data-theme="dark"] .flow-year,
html[data-theme="dark"] .flow-year .lbl { color: var(--color-text-muted); }
html[data-theme="dark"] .xiao-right { color: var(--color-text-muted); }
html[data-theme="dark"] .xl-mark-before,
html[data-theme="dark"] .xl-mark-after { color: var(--color-text-muted); }

/* ── 子宫名（大命/流命/小命/流月/流日/流时）── */
html[data-theme="dark"] .sub-name-dx,
html[data-theme="dark"] .sub-name-ly,
html[data-theme="dark"] .sub-name-xl,
html[data-theme="dark"] .sub-name-lm,
html[data-theme="dark"] .sub-name-ld,
html[data-theme="dark"] .sub-name-lh { color: var(--color-text-muted); }

/* ── 底部三神（博士/将星/岁建）── */
html[data-theme="dark"] .stars-bottom .col-boshi,
html[data-theme="dark"] .stars-bottom .col-jiang,
html[data-theme="dark"] .stars-bottom .col-sui { color: var(--color-text-muted); }

/* ── 长生状态 ── */
html[data-theme="dark"] .life-state { color: var(--color-text-muted); }
html[data-theme="dark"] .palace-item:hover .life-state { color: var(--color-gold); }

/* ── 运星叠加（大限/流年/小限右侧）── */
html[data-theme="dark"] .rs-dx,
html[data-theme="dark"] .rs-ly,
html[data-theme="dark"] .rs-xl,
html[data-theme="dark"] .rs-lm,
html[data-theme="dark"] .rs-ld,
html[data-theme="dark"] .rs-lh { color: var(--color-text-muted); }

/* ── 宫位底部虚线 ── */
html[data-theme="dark"] .palace-footer { border-top-color: var(--color-border); }

/* ── 四化底色（暗色下略暗，保持辨识）── */
html[data-theme="dark"] .sihua-bg-dx-科 { background-color: #1a3050; }
html[data-theme="dark"] .sihua-ji { background: var(--color-star); }

/* ── 侧边栏 ── */
html[data-theme="dark"] .sidebar .star-info p,
html[data-theme="dark"] .sidebar .phrase-content p { color: var(--color-text-sec); }
html[data-theme="dark"] .sidebar .star-info p strong,
html[data-theme="dark"] .sidebar .star-info .star-subtitle { color: var(--color-text); }
html[data-theme="dark"] .ai-analyze-result { background: #1c1430; border-color: var(--color-border); color: var(--color-text-sec); }
html[data-theme="dark"] .sb-palace-ganzhi { color: var(--color-text-muted); }
html[data-theme="dark"] .sb-empty { color: var(--color-text-muted); }
html[data-theme="dark"] .sidebar .divider { border-color: var(--color-border); }
html[data-theme="dark"] .sidebar .section-title { color: var(--color-text); }
html[data-theme="dark"] .sidebar .phrase-content p::before { background: var(--color-star-sha); }
/* 宫位总览标题 */
html[data-theme="dark"] .sb-palace-block-title { background: var(--color-brand); color: #0f0a1e; }
html[data-theme="dark"] .sb-palace-block-gz { color: var(--color-text); }
/* 星曜分组标签 border */
html[data-theme="dark"] .sb-star-group-label { color: var(--color-text-muted); border-left-color: var(--color-brand); }
html[data-theme="dark"] .sb-star-tag .st-status { color: var(--color-text-muted); }
html[data-theme="dark"] .sb-star-tag .st-sihua { color: var(--color-star-sha); }
/* 命/身标记 */
html[data-theme="dark"] .sb-mark.soul { background: #2a1020; color: var(--color-star-sha); border-color: #3a1840; }
html[data-theme="dark"] .sb-mark.body { background: #1a1830; color: var(--color-brand); border-color: #2a2840; }
html[data-theme="dark"] .ap-mark-body  { background: var(--color-brand); color: #0f0a1e; }
/* 星曜标签 */
html[data-theme="dark"] .sb-star-tag.t-main { background: #2a1030; color: var(--color-star); border-color: #3a1840; }
html[data-theme="dark"] .sb-star-tag.t-ji   { background: #201a30; color: var(--color-star-ji); border-color: #2a2040; }
html[data-theme="dark"] .sb-star-tag.t-sha  { background: #2a1020; color: var(--color-star-sha); border-color: #3a1830; }
html[data-theme="dark"] .sb-star-tag.t-aux  { background: #1a1830; color: var(--color-star-aux); border-color: #2a2840; }
html[data-theme="dark"] .sb-star-tag.t-run  { background: #102a20; color: var(--color-star-run); border-color: #183a30; }
/* 格局标签 */
html[data-theme="dark"] .sb-pattern-ji-tag   { background: #2a1a10; color: var(--color-gold); border-color: #3a2a18; }
html[data-theme="dark"] .sb-pattern-xiong-tag { background: #2a1020; color: var(--color-star-sha); border-color: #3a1830; }

/* ── 侧边栏付费遮罩（web/mob 共用）── */
#sb-paid-wrap { position: relative; }
#sb-paid-wrap:has(.preview-lock-wrap:not(.hidden)) {
    max-height: 340px;
    overflow: hidden;
}
#sb-paid-wrap .preview-lock-wrap {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    margin: 0;
    border-radius: 0;
    height: 220px;
}
#sb-paid-wrap .preview-lock-wrap .preview-fade {
    position: relative;
    height: 220px;
    bottom: auto; left: auto; right: auto;
}

/* ── 输入栏 & 按钮 ── */
html[data-theme="dark"] #bazi-input-bar { background: var(--color-panel); color: var(--color-text); }
html[data-theme="dark"] #bazi-input-bar input[type="number"],
html[data-theme="dark"] #bazi-input-bar input[type="text"] { background: var(--color-page); border-color: var(--color-border); color: var(--color-text); }
html[data-theme="dark"] .bz-cal-btn { background: var(--color-subtle); border-color: var(--color-border); color: var(--color-text-sec); }
html[data-theme="dark"] .dx-btn,
html[data-theme="dark"] .ly-btn,
html[data-theme="dark"] .flow-btn,
html[data-theme="dark"] .dp-btn { background: var(--color-subtle); border-color: var(--color-border); color: var(--color-text-sec); }
html[data-theme="dark"] .dx-scroll-arrow { background: var(--color-subtle); border-color: var(--color-border); color: var(--color-text-sec); }
html[data-theme="dark"] .dx-scroll-arrow:active { background: var(--btn-hover); }
html[data-theme="dark"] .dx-btn:hover { background: #0a1a10; }
html[data-theme="dark"] .ly-btn:hover { background: #0a1020; }
html[data-theme="dark"] .tag.plain { background: var(--color-subtle); border-color: var(--color-border); color: var(--color-text-sec); }
html[data-theme="dark"] .tag.plain:hover { background: var(--btn-hover); }
html[data-theme="dark"] .btn-default:hover { background: var(--btn-hover); }

/* ── 流月/流日/流时按钮 ── */
html[data-theme="dark"] .flow-btn { background: var(--color-subtle); border-color: var(--color-border); color: var(--color-text-sec); }
html[data-theme="dark"] .flow-btn:hover { border-color: var(--color-text-muted); color: var(--color-text-faint); }
html[data-theme="dark"] .flow-btn.flow-active { background: var(--color-brand); color: var(--color-panel); border-color: var(--color-brand); }

/* ── 流年高亮按钮 ── */
html[data-theme="dark"] .ly-btn.ly-today { background: #2a2010; color: var(--color-gold); border-color: #5a4a30; }
html[data-theme="dark"] .ly-btn.ly-sel { background: var(--color-positive); color: var(--color-panel); border-color: var(--color-positive); }

/* ── 大限按钮 ── */
html[data-theme="dark"] .dx-btn.dx-cur { background: var(--color-daxian-active-bg); }
html[data-theme="dark"] .dx-btn.dx-sel { background: var(--color-positive); color: var(--color-panel); border-color: var(--color-positive); }

/* ── 中宫快捷按钮 ── */
html[data-theme="dark"] .qbtn { background: var(--color-subtle); border-color: var(--color-star-sub); color: var(--color-text-sec); }
html[data-theme="dark"] .qbtn:hover { border-color: var(--color-text-sec); background: var(--color-panel); }
html[data-theme="dark"] .qbtn.q-year.active  { background: #0a1a10; border-color: var(--color-positive); color: var(--color-positive); }
html[data-theme="dark"] .qbtn.q-month.active { background: #2a1a00; border-color: #c07000; color: #c07000; }
html[data-theme="dark"] .qbtn.q-day.active   { background: #1a1008; border-color: var(--color-earth); color: var(--color-earth); }
html[data-theme="dark"] .qbtn.q-hour.active  { background: var(--color-dark); border-color: var(--color-star-sub); color: var(--color-star-sub); }
html[data-theme="dark"] .qbtn.q-min { background: var(--color-star); color: #100922; }
html[data-theme="dark"] .qbtn.q-min.active { background: var(--color-star); color: #100922; }
html[data-theme="dark"] .qbtn.q-vip { background: var(--color-star); color: #100922; border: none; }
html[data-theme="dark"] .qbtn.q-vip:hover { background: var(--color-star); color: #100922; }
html[data-theme="dark"] .center-me-btn { background: var(--color-subtle); border-color: var(--color-star); color: var(--color-star); }

/* ── 中宫八字文字 ── */
html[data-theme="dark"] .name-row .left,
html[data-theme="dark"] .name-row .right,
html[data-theme="dark"] .base-row,
html[data-theme="dark"] .bazi-row { color: var(--color-text-sec); }
html[data-theme="dark"] .center-wxju { color: var(--color-text-muted); }
html[data-theme="dark"] .bazi-pillar-ss { color: var(--color-text-muted); }
html[data-theme="dark"] #center-lunar { color: var(--color-text-muted); }
html[data-theme="dark"] .bz-dy-shishen,
html[data-theme="dark"] .bz-dy-gz,
html[data-theme="dark"] .bz-dy-ay { color: var(--color-text-muted); }
html[data-theme="dark"] .qgz { color: var(--color-text-sec); }

/* ── 定盘按钮 ── */
html[data-theme="dark"] .dp-btn { background: var(--color-subtle); border-color: var(--color-border); color: var(--color-text-sec); }

/* ── 定盘按钮锁定态 ── */
#dingpan-bar.dp-locked .dp-btn { opacity: .4; cursor: not-allowed; }
#dingpan-bar.dp-locked .dp-btn:hover { background: none !important; border-color: var(--color-border) !important; color: var(--color-text-muted) !important; }

/* ── 认证弹窗 ── */
html[data-theme="dark"] .auth-box { background: var(--color-panel); }
html[data-theme="dark"] .auth-tabs { border-bottom-color: var(--color-border); }
html[data-theme="dark"] .auth-tab { color: var(--color-text-muted); }
html[data-theme="dark"] .auth-tab.active { color: var(--color-brand); border-bottom-color: var(--color-brand); }
html[data-theme="dark"] .auth-sub-tab { color: var(--color-text-muted); border-color: var(--color-border); }
html[data-theme="dark"] .auth-sub-tab.active { background: var(--color-brand); border-color: var(--color-brand); }
html[data-theme="dark"] .auth-form-group input { background: var(--color-subtle); border-color: var(--color-border); color: var(--color-text); }
html[data-theme="dark"] .auth-form-group input:focus { border-color: var(--color-brand); }
html[data-theme="dark"] .auth-btn-code { background: var(--color-brand); }
html[data-theme="dark"] .auth-btn-submit { background: var(--color-brand); }
html[data-theme="dark"] .auth-btn-wechat { background: var(--color-subtle); border-color: var(--color-border); }
html[data-theme="dark"] .auth-btn-wechat:hover { background: var(--color-btn-hover); }
html[data-theme="dark"] .auth-divider { color: var(--color-text-muted); }
html[data-theme="dark"] .auth-divider::before,
html[data-theme="dark"] .auth-divider::after { background: var(--color-border); }
html[data-theme="dark"] .auth-close { color: var(--color-text-muted); }
html[data-theme="dark"] .auth-close:hover { color: var(--color-text); }

/* ── 设置弹窗 ── */
html[data-theme="dark"] .zw-settings-modal { background: var(--color-panel); }
html[data-theme="dark"] .zw-settings-header h2 { color: var(--color-text); }
html[data-theme="dark"] .settings-section { color: var(--color-text); border-bottom-color: var(--color-border); }
html[data-theme="dark"] .zw-section { border-color: var(--color-border); }
html[data-theme="dark"] .zw-section-title { background: var(--color-subtle); color: var(--color-text); }
html[data-theme="dark"] .zw-section[open] > .zw-section-title { background: #3a3040; }
html[data-theme="dark"] .zw-row { border-bottom-color: var(--color-text); }
html[data-theme="dark"] .zw-row-label { color: var(--color-text-sec); }
html[data-theme="dark"] .zw-seg-btn { background: var(--color-subtle); color: var(--color-text-muted); border-color: var(--color-text-sec); }
html[data-theme="dark"] .zw-seg-btn.active { background: var(--color-brand); color: var(--color-panel); }
html[data-theme="dark"] .sihua-row { background: var(--color-subtle); border-color: var(--color-border); }
html[data-theme="dark"] .sihua-label { color: var(--color-text-sec); }
html[data-theme="dark"] .zw-config-input { background: var(--color-subtle); border-color: var(--color-text-sec); color: var(--color-text); }
html[data-theme="dark"] .settings-actions { border-top-color: var(--color-border); }
html[data-theme="dark"] .settings-tip { color: var(--color-text-muted); }
html[data-theme="dark"] .modal-close { color: var(--color-text-muted); }
html[data-theme="dark"] .modal-close:hover { color: var(--color-text); }

/* ── 紧凑选择器 ── */
html[data-theme="dark"] .cp-popup { background: var(--color-panel); border-color: var(--color-text-sec); }
html[data-theme="dark"] .cp-popup-header { color: var(--color-text); border-bottom-color: var(--color-border); }
html[data-theme="dark"] .cp-pick-content::before { background: linear-gradient(to bottom, var(--color-panel) 0%, rgba(30,30,50,.6) 50%, transparent 100%); }
html[data-theme="dark"] .cp-pick-content::after { background: linear-gradient(to top, var(--color-panel) 0%, rgba(30,30,50,.6) 50%, transparent 100%); }
html[data-theme="dark"] .cp-pick-btn { background: var(--color-panel); color: var(--color-text); }
html[data-theme="dark"] .cp-pick-btn.cancel { color: var(--color-text-muted); border-right-color: var(--color-border); }
html[data-theme="dark"] .cp-pick-item { background: var(--color-panel); border-color: var(--color-border); color: var(--color-text); }
html[data-theme="dark"] .cp-btn { background: var(--color-subtle); border-color: var(--color-border); color: var(--color-text-sec); }
html[data-theme="dark"] .cp-btn:hover { border-color: var(--color-text-muted); }
html[data-theme="dark"] .cp-arr { background: var(--color-subtle); border-color: var(--color-border); color: var(--color-text-sec); }

/* ── 杂项 ── */
html[data-theme="dark"] .lunar-now-nav { color: var(--color-text-muted); }
html[data-theme="dark"] .header-form input[type="text"] { background: var(--color-page); border-color: var(--color-border); color: var(--color-text); }
html[data-theme="dark"] .leap-label { color: var(--color-text-sec); }
html[data-theme="dark"] .flow-row-label { color: var(--color-text-muted); }
html[data-theme="dark"] #pai-switch-bar button { background: var(--color-subtle); color: var(--color-text-sec); border-color: var(--color-border); }
html[data-theme="dark"] #pai-switch-bar button.active { background: var(--color-brand); color: var(--color-panel); }

/* ── 表单基础（两端共用）── */
.lbl { color: var(--color-brand); font-weight: 600; white-space: nowrap; font-family: "MiSans", sans-serif; font-size: 13px; }
.seeker-input { padding: 4px 8px; border: 1px solid var(--color-border); border-radius: 4px; font-size: 13px; width: 80px; font-family: "MiSans", sans-serif; font-weight: 400; }
.date-input { padding: 4px 4px; border: 1px solid var(--color-border); border-radius: 4px; font-size: 13px; text-align: center; width: 36px; font-family: "MiSans", sans-serif; font-weight: 400; }
.date-input.year { width: 48px; }
.cal-group { display: inline-flex; border: 1px solid var(--color-border); border-radius: 4px; overflow: hidden; }
.cal-group label { display: flex; align-items: center; padding: 4px 10px; font-size: 12px; cursor: pointer; background: var(--color-panel); color: var(--color-text-sec); border-right: 1px solid var(--color-border); transition: background .15s, color .15s; font-family: "MiSans", sans-serif; font-weight: 400; }
.cal-group label:last-child { border-right: none; }
.cal-group label.active { background: var(--color-brand); color: var(--color-panel); }
.cal-group input[type="radio"] { display: none; }
.leap-label { display: none; align-items: center; gap: 4px; font-size: 12px; cursor: pointer; font-family: "MiSans", sans-serif; font-weight: 400; }

/* ── 默认隐藏手机专用元素（桌面端生效）── */
.mobile-record-link,
.mobile-actions-outside { display: none; }