/* nav */

.nav-accordion {
    width: 100%;
    /* 300px 转换成 rem */
    /* border: 0.0625rem solid #ddd; */
    /* 1px 转换成 rem */
    /* border-radius: 0.3125rem; */
    /* 5px 转换成 rem */
    overflow: hidden;
    text-align: center;
}

.nav-accordion-item {
    /* border-bottom: 0.0625rem solid #ddd; */
    /* 1px 转换成 rem */
}


/*默认的一级菜单的class*/

.nav-accordion-header {
    position: relative;
    /* 🔥 给箭头提供定位参照 */
    /* background-color: #f7f7f7; */
    /* padding: 0.625rem; */
    /* 10px 转换成 rem */
    cursor: pointer;
    color: #b9b9b9;
    font-size: 1rem;
    padding: .2rem 0;
}


/*激活的一级菜单的class*/

.nav-active-accordion-header {
    position: relative;
    /* 🔥 给箭头提供定位参照 */
    cursor: pointer;
    font-weight: bold;
    color: white;
    padding: .2rem 0;
}

.nav-accordion-content {
    /* display: none; */
    color: #b8b8b8;
    background-color: #282828;
    font-size: .9rem;
    /* background-color: #fff; */
    /* padding-left: 0.60rem; */
    /* 10px 转换成 rem */
    /*伸缩效果*/
    /* opacity: 0; */
    max-height: 0;
    overflow: hidden;
    transition: all 0.5s ease;
    /* 过渡效果 */
    /* transition: all 3s ease; */
}


.nav-accordion-content.show {
    display: block;
    opacity: 1;
    transform: translateY(0);
    max-height: 1000px;
    transition: all 0.5s ease;
}

.nav-submenu a {
    display: block;
    border-bottom: none !important;
    /*去掉下划线*/
    /* padding: 0.3125rem 0; */
    /* 5px 转换成 rem */
    text-decoration: none;
    color: #333;
}

.nav-submenu a:hover {
    /* color: #4caf50; */
    color: #4caf50;
}

.btn-success {
    color: #fff;
    background-color: #19af3c;
    border-color: #19af3c
}

/* Active classes */

.nav-active {
    /* background-color: #4caf50; */
    /* color: white; */
    color: red;
}

.nav-title {
    font-size: 1rem;
}


/*默认的二级菜单的class*/

.nav-second-menu {
    /* color: #b8b8b8 !important; */
    color: #e2e2e2 !important;
    font-size: 0.9rem;
    padding: .15rem 0;
    /* height: 28.8px; */
}

.nav-second-menu:hover {
    /* color: #e8e8e8 !important; */
    /* color: blue !important; */
    color: #19af3c !important;
}


/*激活的二级菜单的class*/

.nav-arrow {
    position: absolute;
    /* 🔥 脱离文档流，不占位置 */
    right: 52px;
    /* 距离右边 */
    top: 50%;
    transform: translateY(-50%);
    font-size: .78rem;
    color: #888;
    pointer-events: none;
    /* 不影响 hover / click */
}

/**激活的以及菜单的nav-arrow 显示为白色*/
.nav-active-accordion-header .nav-arrow {
    color: #fff;
    /* 激活颜色 */
    font-weight: bold;

    /* transform: translateY(-50%) rotate(90deg); /* 例如展开态 */
}

/**
nav-accordion-header:hover  显示为白色
nav-accordion-header:hover .nav-arrow显示为白色
*/
.nav-accordion-header:hover {
    color: #fff;
    background-color: #5b5b5b;
}

.nav-accordion-header:hover .nav-arrow {
    color: #fff;
}


/* 🔥 hover 面板：真正向右铺开 */
.nav-hover-panel {
    /* display: block !important; */
    position: fixed;
    left: 218px;
    top: 0;
    /* padding-top: 10px; */
    /* padding-bottom: 10px; */
    padding: 10px;
    background: #111;
    background: #fff;
    /* border-left: 1px solid #222; */
    box-shadow: 4px 4px 50px rgba(0, 0, 0, .25);
    display: none;
    z-index: 9999;

    /* 🔥 关键：限制最大高度为16行 */
    max-height: calc(40px * 10);
    /* 16行 × 40px每行 */

    /* 🔥 关键：使用多列布局，自动向右扩展 */
    column-width: 200px !important;
    column-gap: 0;
    column-fill: auto;

    /* 🔥 关键：宽度自动扩展，不出现滚动条 */
    width: auto;
    min-width: 220px;
    /* 最小宽度为一列 */
    max-width: calc(220px * 6);
    /* 最多10列，防止无限扩展 */

    /* 🔥 关键：垂直溢出隐藏，水平自动扩展 */
    overflow-y: hidden;
    overflow-x: visible;
}


@media only screen and (max-width:1440px) {

    .nav-hover-panel {
        left: 12.5rem !important
    }

    .nav-arrow{
        right: 48px;
    }
}


@media only screen and (max-width:1024px) {

    .nav-hover-panel {
        left: 11.875rem !important
    }

    .nav-arrow{
        right: 46px;
    }
}


@media only screen and (max-width:980px) {

    .nav-hover-panel {
        left: 11.25rem !important
    }

    .nav-arrow{
        right: 38px;
    }

}


@media only screen and (max-width:768px) {

    .nav-hover-panel {
        left: 11.25rem !important
    }

    .nav-arrow{
        right: 36px;
    }
}


/* 🔥 控制每项高度，使每列显示固定行数 */
.nav-hover-item {
    padding: 12px 18px;
    font-size: 13px;
    color: #444;
    white-space: nowrap;
    cursor: pointer;
    break-inside: avoid;
    /* 防止项目跨列断开 */
    height: 40px;
    /* 🔥 固定高度 */
    display: flex;
    align-items: center;
}


.nav-hover-item:hover {
    background: #f3f3f3;
    color: #000;
}



.content-body.dimmed::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(.05px);
    -webkit-backdrop-filter: blur(.05px);
    pointer-events: none;
    z-index: 10;
}



.nav-active-second-menu {
    font-size: 0.9rem;
    /* font-weight: bold; */
    color: #19af3c !important;
    /* color: #e8e8e8 !important; */
}

.two_part_container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 两列，均分 */
    gap: 20px;
    /* 列之间的间隔 */
}

.three__two_part_container {
    display: grid;
    grid-template-columns: 3fr 2fr;
    /* 两列，均分 */
    gap: 20px;
    /* 列之间的间隔 */
}

.two_part_container-margin-five {
    display: grid;
    margin-left: .5rem;
    margin-right: .5rem;
    grid-template-columns: 1fr 1fr;
    /* 两列，均分 */
    gap: 20px;
    /* 列之间的间隔 */
}

.one_six_container {
    display: grid;
    grid-template-columns: 34px 158px;
    /* 两列，均分 */
    gap: 0px;
    /* 列之间的间隔 */
}

.single_emoji_image {
    width: 34px;
    height: 34px;
}

/**按钮的样式*/
/* 弹框样式 */
.popup-success {
    /* width: 100px; */
    /* height: 40px; */
    background-color: rgb(238, 248, 229);
    color: rgb(93, 192, 22);
    z-index: 100;
    display: flex;
    padding: 0.36rem 0.68rem;
    justify-content: center;
    align-items: center;
    border-radius: 0.25rem;
    position: fixed;
    /* top: 3.6%; */
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.98rem;
    font-family: 'PingFang SC', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    opacity: 0;
    pointer-events: none;
    /* 初始不可点击 */
    /* transition: opacity 1.5s ease, pointer-events 0s 1.5s; */
}

.popup-warn {
    /* width: 100px; */
    /* height: 40px; */
    background-color: #fcf6ed;
    color: #f3981a;
    z-index: 100;
    display: flex;
    padding: 0.36rem 0.68rem;
    justify-content: center;
    align-items: center;
    border-radius: 0.25rem;
    position: fixed;
    /* top: 3.6%; */
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.98rem;
    font-family: 'PingFang SC', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    opacity: 0;
    pointer-events: none;
    /* 初始不可点击 */
    /* transition: opacity 1.5s ease, pointer-events 0s 1.5s; */
}

.popup-error {
    background-color: #fcf0f0;
    color: #ee4930;
    z-index: 100;
    display: flex;
    padding: 0.36rem 0.68rem;
    justify-content: center;
    align-items: center;
    border-radius: 0.25rem;
    position: fixed;
    /* top: 3.6%; */
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.98rem;
    font-family: 'PingFang SC', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    opacity: 0;
    pointer-events: none;
    /* 初始不可点击 */
    /* transition: opacity 1.5s ease, pointer-events 0s 1.5s; */
}


/* 按钮样式 */
.show-button {
    margin: 20px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

.common-hide {
    opacity: 0;
}

/**右下角助手 */
.assistant-hide {
    opacity: 0;
}


.right-container {
    position: fixed;
    /* border: 1px solid #cfcfcf; */
    /* padding-top: 6px; */
    /* padding-bottom: 0px; */
    width: 40px;
    /* height: 190px; */
    height: auto;
    bottom: 1%;
    right: 10px;
    /* background-color: white; */
    text-align: center;
    z-index: 100;
}

.assistant-show {
    opacity: 1;
}

.assistant-box {
    width: 45px;
    height: 45px;
    border-radius: 6px;
    text-align: center;
    vertical-align: center;
    border: 1px solid #aaaaaa;
    background-color: #999;
}



/**网络布局 */
/* 父级容器，设置为 flex 布局 */
.wd-flow {
    display: flex;
    flex-direction: column;
    /* 子元素垂直排列 */
    /* gap: 0.5rem; */
    /* background-color: #f4f4f4; */
}

/* 子容器，设置为水平排列子组件 */
.wd-container {
    display: flex;
    flex-wrap: wrap;
    /* 允许子组件自动换行 */
    gap: 0.2rem;
    /* 子组件之间的间距 */
    /* background-color: #e0e0e0; */
    /* border: 2px solid #ccc; */
}

/* 每个子组件的样式 */
.wd-child {
    display: flex;
    flex-direction: row;
    /* 每个子组件内部水平排列 */
    justify-content: space-between;
    /* 内部的 div 水平分布 */
    /* gap: 0.2rem; */
    margin-right: 0.25rem;
    /* 子元素间距 */
    background-color: #fff;
    /* border: 1px solid #ddd; */
    /* width: 300px; */
    /* 每个子组件的宽度固定 */
    margin-bottom: 0.75rem;
    box-sizing: border-box;
    /* 确保内边距和边框包括在宽度计算内 */
}

/* 子组件1和子组件2的左右比例为1:3，使用grid布局 */
.wd-child-grid {
    display: grid;
    grid-template-columns: 1fr 0.5rem 3fr;
    /* 设置左右比例为1:3 */
}

/* 子组件内的两个 div 的样式 */
.wd-child div {
    /* padding: 0.2rem; */
    font-size: 0.9rem;
    /* background-color: #d3d3d3; */
    /* border: 1px solid #bbb; */
}


.btn-max {
    float: right;
    font-size: .88rem;
    /* border: 1px solid #ccc; */
    border-radius: 3px;
    background-color: #fff;
    padding: 3px 5px;
    cursor: pointer;
    color: #666;
    border: none;
    color: #313131;
    margin-left: auto;
}

.error-font-color {
    color: #c03e29;
}

.error-class {
    background-color: #fce4e4;
    color: #ea5455;
    padding: 8px 6px;
    border-radius: 4px;
    box-sizing: border-box;
}

.right-class {
    background-color: #caeedb;
    /* background-color: #92e1b7; */
    color: #02bc55;
    /* color: white; */
    padding: 8px 6px;
    border-radius: 4px;
    box-sizing: border-box;
}

.show-info-class {
    display: flex;
    justify-content: center;
}

.hide-class {
    opacity: 0;
}




/**通用的table*/
.wd-table {
    width: 100%;
    table-layout: fixed;
    /* 设置为固定宽度 */
    font-size: 0.875rem;
    /* 14px */
    border-collapse: collapse;
    margin-top: 1.25rem;
    /* 20px */
}

.margin-top-point-five {
    margin-top: .5rem;
}

.padding-top-point-five {
    padding-top: .5rem;
}

.padding-bottom-point-five {
    padding-bottom: .5rem;
}

.margin-bottom-point-five {
    margin-bottom: .5rem;
}



.wd-table th,
.wd-table td {
    padding: 0.625rem;
    /* 10px */
    text-align: center;
    border: 1px solid #ddd;
    /* 添加边框 */
}

.wd-table th {
    background-color: #f2f2f2;
    /* 头部背景色 */
    font-weight: bold;
}

.wd-table td {
    background-color: #fff;
}

/* 响应式设计 */
@media (max-width: 48rem) {

    /* 768px */
    .wd-table th,
    .wd-table td {
        padding: 0.5rem;
        /* 8px */
        font-size: 0.75rem;
        /* 12px */
    }
}

.span-copy {
    color: #19af3c;
    font-size: .9rem;
    cursor: pointer;
}

.copy-span {
    color: #19af3c;
    font-size: .9rem;
    cursor: pointer;
}


.current-copy {
    color: #19af3c;
    /* font-size: .9rem; */
    cursor: pointer;
}



.current-black-copy {
    color: #383838;
    font-size: .9rem;
    cursor: pointer;
}

.current-black-copy:hover {
    color: #02bc55;
}

.one-rem-font-size {
    font-size: 1rem;
}

.clear-border {
    border: none !important;
}

.four-rem-width {
    width: 4rem;
}

.two-rem_line_height {
    line-height: 2rem;
}

.div-inline {
    display: inline;
}

.margin-right-point-five-rem {
    margin-right: .5rem;
}

.textarea_class {
    white-space: nowrap;
    overflow-x: auto;
    /* 启用水平滚动条 */
}

.home-page-img-class {
    width: 1.6rem;
    height: 1.6rem;
}

/* .h1-span{
    font-weight: bold;
    color:#c8c8c8 !important;
}

.p-span{
    color: #a8a8a8 !important;
} */

.one-two-font {
    font-size: 1.2rem;
}

.one-one-font {
    font-size: 1.1rem;
}

.one-font {
    font-size: 1rem;
}

.default-color {
    color: #52be6b;
}

.margin-right-10 {
    margin-right: 10px;
}

.margin-left-10 {
    margin-left: 10px;
}


/**
横向的信息开始
*/

.meta-row {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.meta-label {
    /* width: 90px; */
    flex-shrink: 0;
}

.meta-badge {
    display: block;
    padding: 2px 8px;
    font-size: .8rem;
    text-align: center;
    border-radius: 4px;
    color: #fff;
}

/* 状态语义 */
.meta-badge.success {
    background: #10b981;
}

.meta-badge.primary {
    background: #3b82f6;
}

.meta-badge.warning {
    background: #f59e0b;
}

.meta-value {
    font-family: monospace;
    font-size: .88rem;
    color: #374151;
    padding: 2px 8px;
    word-break: break-all;
}

/**
横向的信息结束
*/

.own-hide {
    visibility: hidden;
}

.site-name{
    font-size: 1.6rem;
}




/**
输入框placeholder颜色
*/

input::placeholder,
textarea::placeholder {
  color: #a0a0a0;
} 

/* Chrome / Safari / Edge */
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #a0a0a0;
}

/* Firefox */
input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #a0a0a0;
}

/* IE 10+（基本可以不写了） */
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #a0a0a0;
}



.special-line {
    display: flex;
    align-items: center; /* 垂直居中 */
    margin-top: 4px;
    gap: 6px;            /* 控制间距 */
}