/* 在CSS最顶部添加 */
:root {
    /* 计算九宫格基础尺寸（基于父容器宽度的1/3减去17px） */
    --jiugong-size: calc(33.33% - 17px);
}/* ==============================================
1. 通用清除浮动工具类
作用：解决父容器因子元素浮动导致的高度塌陷问题
适用场景：所有需要清除浮动的容器（如.paipan-result .-col、.-horizontal等）
============================================== */

/* ==============================================
2. 响应式设计 - 小屏等比缩小
作用：使排盘结果在小屏幕设备上能够等比例缩小
适用场景：屏幕宽度小于360px的设备
============================================== */
@media (max-width: 360px) {
    /* 基于屏幕宽度动态调整排盘容器的缩放比例 */
    .paipan-result {
        /* 使用transform: scale()进行等比缩放，基于屏幕宽度与360px的比例 */
        transform: scale(calc(100vw / 360));
        /* 调整容器的最大宽度为屏幕宽度，确保缩放后内容不溢出 */
        max-width: 100vw;
        /* 调整外边距，确保缩放后内容居中显示 */
        margin: 0 auto;
        /* 调整transform-origin，确保缩放从左上角开始 */
        transform-origin: top center;
    }
    
    /* 调整排盘基础信息容器的宽度，使其适应缩放后的布局 */
    .paipan-base {
        width: 91.67vw; /* 330px / 360px * 100vw */
    }
    
    /* 调整标签页和功能按钮的最大宽度，使其适应缩放后的布局 */
    .qimen-tabs,
    .additional-functions {
        max-width: 83.33vw; /* 300px / 360px * 100vw */
    }
}

/* 针对更小屏幕的进一步优化 */
@media (max-width: 320px) {
    /* 可以根据需要添加更细致的调整 */
    .paipan-result {
        /* 可以进一步调整缩放比例或其他样式 */
    }
}
.clear::after {
    display: block; /* 转换为块级元素，确保独占一行 */
    clear: both; /* 清除左右两侧浮动影响 */
    content: ""; /* 伪元素必须有content属性（空值也可），否则不生效 */
}
/* ==============================================
4. 原有基础样式（排盘核心区域样式，不轻易修改）
对应PHP中.paipan-result容器及内部核心元素（九宫、地支、神煞等）
============================================== */
/* 4.1 排盘结果外层容器（整个排盘模块的根容器） */
.paipan-result {
    position: relative; /* 相对定位，为内部绝对定位元素提供参考 */
    max-width: 360px; /* 最大宽度限制，避免大屏下内容过宽 */
    margin: 0 auto; /* 水平居中，让排盘模块在页面中间显示 */
    padding: 20px 0 40px; /* 上下内边距（顶部20px，底部40px），左右无 padding */
    font-size: 15px; /* 基础字体大小，控制整个排盘区域文字尺寸 */
    line-height: 25px; /* 行高，确保文字垂直间距舒适 */
    font-weight: bold; /* 全局字体加粗，突出排盘内容 */
}

/* 都天奇门标签样式 */
.dutian-qimen-label {
    text-align: center; /* 文字居中显示 */
    font-size: 24px; /* 增大字体，突出显示 */
    font-weight: bold; /* 字体加粗 */
    color: #000000; /* 使用红色，与其他重要信息保持一致 */
    margin-bottom: 35px; /* 与下方内容保持适当间距 */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0); /* 添加轻微阴影，增强立体感 */
    letter-spacing: 2px; /* 增加字间距，提升美观度 */
}

/* 原局时不显示九星转运标签 */
.dutian-qimen-label.original-game {
    display: none;
}

/* 手机端：将九星转运信息显示在最底部 */
@media (max-width: 768px) {
    /* 调整九星转运标签位置，使其显示在页面底部 */
    .dutian-qimen-label {
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 14px;
        font-weight: normal;
        color: var(--text-secondary);
        background: var(--background-white);
        box-shadow: var(--shadow-medium);
        padding: 8px 16px;
        margin: 0;
        text-shadow: none;
        letter-spacing: normal;
        border-radius: var(--border-radius);
        z-index: 100;
    }
    
    /* 原局时不显示九星转运标签 */
    .dutian-qimen-label.original-game {
        display: none;
    }
}

/* 4.2 列容器（控制九宫、地支的列布局） */
.paipan-result .-col {
    position: relative; /* 相对定位，用于内部元素定位 */
    text-align: center; /* 子元素居中对齐 */
}
/* 清除列容器内的浮动（避免高度塌陷） */
.paipan-result .-col::after {
    display: block;
    clear: both;
    content: "";
}
/* 第二个列容器特殊样式（上下内边距5px，调整垂直位置） */
.paipan-result .-col:nth-child(2) {
    padding: 5px 0;
}

/* 4.3 水平布局容器（如地支、神煞的横向排列） */
.paipan-result .-horizontal {
    text-align: center; /* 子元素居中 */
}
/* 清除水平容器内的浮动 */
.paipan-result .-horizontal::after {
    display: block;
    clear: both;
    content: "";
}
/* 水平容器内的行内元素（如地支文字、神煞标识） */
.paipan-result .-horizontal span {
    display: inline-block; /* 行内块级，可设置宽高和间距 */
    line-height: 1;
    vertical-align: super;
}
/* 确保.dizhi.-horizontal完全垂直于九宫格 */
.paipan-result .dizhi.-horizontal {
    padding: 0;
    margin: 0;
    margin-bottom: 5px;
    margin-top: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateX(27px); /* 向右平移，调整与九宫格的对齐关系 */
}
/* 4.4 行容器（控制九宫、地支的行布局，横向排列子元素） */
.paipan-result .-row {
    display: flex; /* 弹性布局，让子元素横向排列 */
    position: relative; /* 相对定位，为内部元素提供参考 */
}
/* 4.5 内部井字格边框样式（控制九宫、元素的边框显示） */
.paipan-result .-line {
    border-width: 0; /* 默认无边框 */
    border-style: solid; /* 边框样式为实线 */
    border-color: var(--tb--gray); /* 边框颜色：使用全局灰色变量（需提前定义） */
}

/* 4.7 九宫格边框方向控制（单独控制某一侧边框显示） */
.paipan-result .-l {
    border-left-width: 1px; /* 显示左边框 */
}
.paipan-result .-r {
    border-right-width: 1px; /* 显示右边框 */
}
.paipan-result .-b {
    border-bottom-width: 1px; /* 显示下边框 */
}
.paipan-result .-t {
    border-top-width: 1px; /* 显示上边框 */
}

/* 4.8 内边距控制（不同方向/大小的内边距，调整元素内部间距） */
.paipan-result .-pd-t {
    padding-top: 12px; /* 顶部内边距12px */
}
.paipan-result .-pd-t10 {
    padding-top: 8px; /* 顶部内边距8px（命名为t10是历史习惯，实际为8px） */
}
.paipan-result .-pd-b {
    padding-bottom: 8px; /* 底部内边距8px */
}
.paipan-result .-pd-b1 {
    padding-bottom: 1px; /* 底部内边距1px（微调） */
}
.paipan-result .-pd-l {
    padding-left: 8px; /* 左侧内边距8px */
}
.paipan-result .-pd-r {
    padding-right: 8px; /* 右侧内边距8px */
}
/* 4.9 马星样式（显示“马”字的容器） */
.paipan-result .maxing {
    position: absolute; /* 绝对定位，用于定位到九宫格四角 */
    font-size: 18px; /* 马星字体调整为更小，更易辨别 */
    color: #a43c34; /* 红色显示，与击刑、门迫等凶性状态颜色一致 */
}
/* 特定位置的马星定位到九宫格外部的角上 */
.paipan-result .maxing.si {
    top: -25px; /* 顶部位于九宫格外，继续外移 */
    left: -25px; /* 左侧位于九宫格外，继续外移 */
    transform: translate(0%, 0%); /* 定位到左上角外部 */
}

.paipan-result .maxing.shen {
    top: -25px; /* 顶部位于九宫格外，继续外移 */
    right: -25px; /* 右侧位于九宫格外，继续外移 */
    transform: translate(0%, 0%); /* 定位到右上角外部 */
}

.paipan-result .maxing.yin {
    bottom: -25px; /* 底部位于九宫格外，继续外移 */
    left: -25px; /* 左侧位于九宫格外，继续外移 */
    transform: translate(0%, 0%); /* 定位到左下角外部 */
}

.paipan-result .maxing.hai {
    bottom: -25px; /* 底部位于九宫格外，继续外移 */
    right: -25px; /* 右侧位于九宫格外，继续外移 */
    transform: translate(0%, 0%); /* 定位到右下角外部 */
}

/* 空亡相关的标记样式（使用 `-kw` 前缀，可能是 "kong wang" 的缩写） */
.paipan-result .-kw{position:relative}
.paipan-result .-kw::after{
    position:absolute;
    content:"";
    width:10px;
    height:10px;
    border-radius:50%; /* 圆形效果 */
    background:#ffffff; 
    border:2px solid #999999; /* 中性灰色边框，适应不同背景 */
    z-index:1
}
/* 空亡标记在左上角 */
.paipan-result .-kw-tl::after{top:-7px;left:-7px}
/* 空亡标记在右下角 */
.paipan-result .-kw-br::after{bottom:-7px;right:-7px}

/* 4.10 地支容器（显示12地支的容器，如“子”“丑”） */
.paipan-result .dizhi {
    flex: 0 0 calc(33.33% - 17px); /* 固定宽度：父容器1/3宽度减去17px（适配九宫布局） */
}

/* 4.11 月将相关样式（月将文字及定位） */
.paipan-result .yuejiang {
    position: relative; /* 相对定位，用于微调位置 */
}
.-tjl .yuejiang,
.-tjr .yuejiang {
    top: 32px; /* 向上移动50px，微调位置 */
}
.-tjb .yuejiang {
    top: 0.2px; /* 向上移动50px，微调位置 */
}
/* 天将（绝对定位，基于父容器显示） */
.paipan-result .tianJiang {
    position: absolute; /* 绝对定位，可自由放置 */
}

/* 龙诀相关样式（龙诀文字及定位） */
.paipan-result .longjue {
    position: absolute; /* 相对定位 */
}
.-tjb .longjue,
.-tjt .longjue {
    transform: translateX(30px); /* 向左移动1px */
}
.-tjl .longjue,
.-tjr .longjue {
    transform: translateY(10px); /* 向上移动1px */
}
/* 太阳（绝对定位，基于龙诀容器显示） */
.paipan-result .taiYang {
    position: absolute;
    color: var(--tb--base); /* 使用全局基础色 */
}
/* 建星相关样式（建星文字及定位） */
.paipan-result .jianxing {
    position: absolute; /* 相对定位 */
}
.-tjb .jianxing,
.-tjt .jianxing {
    transform: translateX(-30px); /* 向左移动1px */
}
.-tjl .jianxing,
.-tjr .jianxing {
    top: 69px; /* 向上移动50px，微调位置 */
}
/* 五福（绝对定位，基于建星容器显示） */
.paipan-result .wuFu {
    position: absolute;
    color: var(--tb--base); /* 使用全局基础色 */
}
/* 顶部定位（如“天将”在元素上方显示） */
.-tjt .tianJiang,
.-tjt .taiYang,
.-tjt .wuFu {
    top: 50%; /* 垂直居中 */
    transform: translateY(-180%); /* 精确垂直居中 */
    left: calc(-100% - -15px); /* 左侧距离父容器100%+2px（在父容器左侧） */
}
/* 左侧定位（如“天将”在元素左侧显示） */
.-tjl .tianJiang,
.-tjl .taiYang,
.-tjl .wuFu {
    top: 50%; /* 垂直居中 */
    transform: translateY(-50%); /* 精确垂直居中 */
    left: calc(-100% - 2px); /* 左侧距离父容器100%+2px（在父容器左侧） */
}
/* 右侧定位（如“天将”在元素右侧显示） */
.-tjr .tianJiang {
    transform: translateX(17px) translateY(-24px); /* 向右移动18px，向上移动5px */
}
.-tjr .taiYang,
.-tjr .wuFu {
    top: 50%; /* 垂直居中 */
    transform: translateY(-50%); /* 精确垂直居中 */
    right: calc(-100% - 2px); /* 右侧距离父容器100%+2px（在父容器右侧） */
}
/* 底部定位（如“天将”在元素下方显示） */
.-tjb .tianJiang,
.-tjb .taiYang,
.-tjb .wuFu {
    top: 50%; /* 垂直居中 */
    transform: translateY(80%); /* 精确垂直居中 */
    left: calc(-100% - -15px); /* 左侧距离父容器100%+2px（在父容器左侧） */
}
/* 4.14 垂直布局容器（如侧边地支的垂直排列） */
.paipan-result .-vertical {
    flex: 1; /* 占满父容器剩余宽度，自适应布局 */
}
/* 垂直容器内的元素（如地支文字） */
.paipan-result .-vertical span {
    display: block; /* 块级显示，让元素垂直排列 */
}
/* 垂直容器内的月将（上下内边距4px，调整垂直间距） */
.paipan-result .-vertical .yuejiang {
    padding: 4px 0;
}

/* 4.15 九宫容器（排盘核心的九宫格，如1宫、2宫...9宫） */
.paipan-result .jiuGong {
    position: relative; /* 相对定位，为内部绝对定位元素提供参考 */
    flex: 0 0 calc(33.33% - 17px); /* 固定宽度：父容器1/3宽度减去17px（与地支容器宽度一致） */
    aspect-ratio: 1; /* 使用aspect-ratio属性确保容器保持正方形 */
    padding-top: 0; /* 重置顶部内边距，使用aspect-ratio控制高度 */
}
/* 地耳相关样式（左浮动，显示地耳文字） */
.paipan-result .dier {
    float: left;
}
/* 地耳文字颜色（使用全局基础色） */
.paipan-result .dier span {
    color: var(--tb--base);
}

/* 4.17 天目相关样式（左浮动，显示天目文字） */
.paipan-result .tianmu {
    float: left;
}
/* 天目文字颜色（使用全局基础色） */
.paipan-result .tianmu span {
    color: var(--tb--base);
}

/* 4.18 八神相关样式（左浮动，显示八神文字） */
.paipan-result .jiushen {
    float: left;
}

/* 4.19 遁支样式（显示九宫遁支文字，如“子”“丑”） */
.paipan-result .dunzhi {
    color: var(--tb--gray); /* 灰色，与其他文字区分 */
    font-size: 10px; /* 字体缩小，作为辅助信息 */
    font-weight: normal; /* 取消加粗，突出其他核心内容 */
}

/* 4.20 天元/金口/玉符相关样式（右浮动，显示对应文字） */
.paipan-result .tianyuan {
    float: right;
}
.paipan-result .jinkou {
    float: right;
}
.paipan-result .yufu {
    float: right;
}
/* 中宫（5宫）特殊处理：天元/金口/玉符不浮动，居中显示 */
.paipan-result .gong5 .tianyuan,
.paipan-result .gong5 .jinkou,
.paipan-result .gong5 .yufu {
    float: unset; /* 取消浮动 */
}
/* 中宫（5宫）遁支定位：绝对定位到右侧中间 */
.paipan-result .gong5 .dunzhi {
    position: absolute;
    right: 0; /* 靠右对齐 */
    top: 50%; /* 垂直居中 */
    transform: translateY(-50%); /* 精确垂直居中（向上移动自身50%高度） */
}

/* 4.21 颜色控制（红色/绿色文字，用于标记特殊状态） */
.paipan-result .-red {
    color: #a43c34; /* 深红色：用于标记“击刑”“门迫”等凶性状态 */
}
.paipan-result .-green {
    color: #629469; /* 深绿色：用于标记“入墓”等中性/特殊状态 */
}

/* 九宫内部容器（九宫格内的内容区域，控制内边距） */
.jiuGong .-inner {
    position: absolute; /* 绝对定位，铺满九宫容器 */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 8px; /* 内边距，让内容不贴边 */
}

/* 5.10 背景定位容器（备用背景元素，默认隐藏） */
.bgdw {
    position: absolute; /* 绝对定位 */
    z-index: 0; /* 层级0，在其他内容下方 */
    top: 19px; /* 顶部距离父容器19px */
    display: none; /* 默认隐藏，需通过JS控制显示 */
}

/* 5.11 排盘基础信息容器（显示公历、阴历、四柱等基础信息） */
.paipan-base {
    position: relative; /* 相对定位 */
    z-index: 1; /* 层级1，在背景上方 */
    width: 330px; /* 固定宽度 */
    margin: 0 auto 60px auto; /* 水平居中，底部外边距50px */
    line-height: 1; /* 行高重置为1 */
}
/* 公历、阴历样式 */
.paipan-base .gong-li,
.paipan-base .yin-li {
    font-size: 15px; /* 基础字体大小，与旬首保持一致 */
    margin-bottom: 14px; /* 底部外边距，行与行之间间距 */
}
/* 天干地支样式 */
.paipan-base .zhu {
    font-size: 15px; /* 基础字体大小，与旬首保持一致 */
    padding-right: 18px; /* 右侧内边距，与其他柱间距 */
}
/* 纳音全局样式 - 与地支行左对齐 */
.paipan-result .nayin {
    font-size: 15px;/* 与旬首保持一致的字体大小 */
    margin-left: 0px; /* 左间距设为0，与地支行左对齐 */
    margin-right: 0px; /* 右间距 */
    display: block; /* 确保作为块元素显示 */
}
/* 排盘基础信息的行容器（弹性布局，横向排列） */
.paipan-base>div {
    display: flex;
    margin-bottom: 14px; /* 底部外边距，行与行之间间距 */
}
/* 排盘基础信息的弹性容器（两端对齐，如“旬首”和“遁局”分居两侧） */
.paipan-base .-flex {
    justify-content: space-between; /* 两端对齐 */
    font-size: 15px; /* 基础字体大小，与其他文字保持一致 */
}
/* 节气时间字体大小 */
.paipan-base .-flex i {
    font-size: 10px; /* 小字体 */
    font-style: normal; /* 取消斜体，作为普通文字 */
}

/* 四柱标签（如“天干：”“地支：”） */
.paipan-base .sizhu-label {
    display: inline-block; /* 行内块级，可设置宽度 */
    width: 51px; /* 固定宽度，确保标签对齐 */
    font-size: 15px; /* 基础字体大小，与其他文字保持一致 */
}
/* 四柱内容（如“甲”“子”） */
.paipan-base .zhu {
    padding-right: 18px; /* 右侧内边距，与其他柱间距 */
}

/* 5.12 奇门标签页（排盘不同模块的切换标签，如“九宫”“地支”） */
.qimen-tabs {
    display: flex; /* 弹性布局，横向排列标签 */
    align-items: center; /* 垂直居中 */
    max-width: 300px; /* 最大宽度限制，加长 */
    overflow: hidden; /* 隐藏溢出内容 */
    text-align: center; /* 标签文字居中 */
    border-radius: 20px; /* 圆角，提升美观度，变为椭圆 */
    margin: 20px auto 0; /* 顶部20px，底部0，水平居中 */
}
/* 单个标签样式 - 默认灰色 */
.qimen-tabs>div {
    flex: 1; /* 平均分配宽度 */
    background-color: #f0f0f0; /* 背景色：浅灰色 */
    line-height: 12px; /* 行高减半，控制标签高度 */
    padding: 4px 8px; /* 内边距减半 */
    position: relative; /* 相对定位 */
    cursor: pointer; /* 鼠标悬停显示“手”形，提示可点击 */
    transition: all .25s; /* 所有属性过渡动画（如背景色、颜色） */
    color: #999999; /* 文字颜色：灰色 */
    font-weight: normal; /* 字体正常，不再加粗 */
    font-size: 12px; /* 字体大小，缩小一倍 */
    border: 0.5px solid #dddddd; /* 边框颜色：浅灰色，缩小一倍 */
}

/* 禁用状态的标签（如无更多内容时） */
.qimen-tabs .disabled {
    color: #cccccc !important; /* 文字颜色：浅灰色 */
    background-color: #f5f5f5 !important; /* 背景色：更浅的灰色 */
    cursor: not-allowed !important; /* 鼠标指针：禁用状态 */
    opacity: 0.6; /* 透明度：降低透明度 */
}
/* 激活状态的标签 - 红色 */
.qimen-tabs>div:not(.disabled):hover,
.qimen-tabs>div.active {
    background-color: #ff4444 !important; /* 背景色：红色 */
    color: white !important; /* 文字颜色：白色 */
    box-shadow: 0 2px 4px rgba(255, 68, 68, 0.3); /* 红色阴影效果 */
    border-color: #ff4444 !important; /* 边框颜色：红色 */
}

/* ==============================================
7. 附加功能按钮样式
用于控制龙诀、月将、建星、隐干、紫白等功能的显示/隐藏
============================================== */
/* 附加功能按钮容器 */
.additional-functions {
    display: flex; /* 弹性布局，横向排列按钮 */
    justify-content: center; /* 水平居中 */
    gap: 0; /* 取消按钮间距 */
    margin: 20px auto; /* 上下外边距20px，水平居中 */
    flex-wrap: nowrap; /* 不换行 */
    max-width: 300px; /* 最大宽度限制，与九星转运按钮一致 */
    overflow: hidden; /* 隐藏溢出内容 */
    border-radius: 20px; /* 圆角，提升美观度，变为椭圆 */
}

/* 单个功能按钮样式 - 不打开状态（灰色） */
.function-btn {
    flex: 1; /* 平均分配宽度 */
    padding: 4px 8px; /* 内边距减半，控制按钮大小 */
    background-color: #f0f0f0; /* 灰色背景，与九星转运按钮一致 */
    color: #999999; /* 灰色文字，与九星转运按钮一致 */
    border: 0.5px solid #dddddd; /* 边框颜色：浅灰色，与九星转运按钮一致 */
    cursor: pointer; /* 鼠标悬停显示“手”形，提示可点击 */
    transition: all 0.25s; /* 所有属性过渡动画 */
    font-weight: normal; /* 字体正常，不再加粗，与九星转运按钮一致 */
    font-size: 12px; /* 字体大小，与九星转运按钮一致 */
    line-height: 12px; /* 行高减半，控制标签高度 */
    aspect-ratio: 3; /* 宽高比调整为3:1，使按钮变窄 */
    display: flex; /* 使用flex布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    text-align: center; /* 文字居中 */
}

/* 隐干按钮特殊样式 - 不激活时红色 */
.function-btn[data-type="yinggan"] {
    background-color: #ff4444 !important; /* 红色背景 */
    color: white !important; /* 白色文字 */
    box-shadow: 0 2px 4px rgba(255, 68, 68, 0.3); /* 红色阴影效果 */
    border-color: #ff4444 !important; /* 红色边框 */
}

/* 隐干按钮激活时灰色 */
.function-btn[data-type="yinggan"].active {
    background-color: #f0f0f0 !important; /* 灰色背景 */
    color: #999999 !important; /* 灰色文字 */
    box-shadow: none !important; /* 无阴影 */
    border-color: #dddddd !important; /* 灰色边框 */
}

/* 功能按钮悬停状态 */
.function-btn:hover {
    background-color: #ff4444 !important; /* 背景色：红色，与九星转运按钮一致 */
    color: white !important; /* 文字颜色：白色，与九星转运按钮一致 */
    box-shadow: 0 2px 4px rgba(255, 68, 68, 0.3); /* 红色阴影效果，与九星转运按钮一致 */
    border-color: #ff4444 !important; /* 边框颜色：红色，与九星转运按钮一致 */
}

/* 隐干按钮悬停状态 */
.function-btn[data-type="yinggan"]:hover {
    background-color: #ff4444 !important; /* 保持红色背景 */
    color: white !important; /* 保持白色文字 */
    box-shadow: 0 2px 4px rgba(255, 68, 68, 0.3) !important; /* 保持红色阴影效果 */
    border-color: #ff4444 !important; /* 保持红色边框 */
}

/* 隐干按钮激活时悬停状态 */
.function-btn[data-type="yinggan"].active:hover {
    background-color: #f0f0f0 !important; /* 保持灰色背景 */
    color: #999999 !important; /* 保持灰色文字 */
    box-shadow: none !important; /* 保持无阴影 */
    border-color: #dddddd !important; /* 保持灰色边框 */
}

/* 功能按钮激活状态（打开状态 - 红色） */
.function-btn.active {
    background-color: #ff4444 !important; /* 红色背景，与九星转运按钮一致 */
    color: white !important; /* 白色文字，与九星转运按钮一致 */
    box-shadow: 0 2px 4px rgba(255, 68, 68, 0.3); /* 红色阴影效果，与九星转运按钮一致 */
    border-color: #ff4444 !important; /* 边框颜色：红色，与九星转运按钮一致 */
}