:root{
    --accent:#2B6EDF;
    --txt-light:rgba(255,255,255,0.95);
    --txt-dark:#111;
    --txt-black:#000000;
    --muted:#cfcfcf;
    --nav-text:#CBD8DF;
    --footer-bg: #fff;
    --footer-txt: #222;
    --footer-muted: #8b8b8b;
    --link-active-bg: transparent;
    /* 黑体优先 */
    --site-sans: "SimHei", "Microsoft YaHei", "Heiti SC", "PingFang SC", "Noto Sans SC", "Helvetica Neue", Arial, sans-serif;
}
/* reset */
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
    color:var(--txt-light);
    background:var(--txt-black);
}
html, body, body * {
    font-family: var(--site-sans) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* 移动触摸设备优先：使用媒体查询只影响触摸设备，保留桌面悬停行为 */
@media (hover: none) and (pointer: coarse) {
    a,
    button,
    input[type="button"],
    input[type="submit"],
    .clickable {
        -webkit-tap-highlight-color: transparent; /* iOS Safari */
        -webkit-touch-callout: none;               /* 长按弹出提示（可选） */
        background: transparent !important;
        box-shadow: none !important;
        outline: none !important;
        /* 如果你使用变量来控制激活背景： */
        /* background-color: var(--link-active-bg) !important; */
    }

    a:active,
    a:focus,
    a:focus-visible,
    button:active,
    button:focus,
    .clickable:active {
        background: transparent !important;
        box-shadow: none !important;
        outline: none !important;
    }
}
button：fucus{
    outline: none;
}
/* header / nav */
header{position:fixed;left:0;right:0;top:0;z-index:50}
.nav-wrap{
    width:100%;
    position:relative;
    background-color: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(2px);
    border-bottom: 1px solid rgba(255,255,255,0.02);
    height: auto;
    transition:
            transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
            box-shadow 0.3s ease,
            opacity 0.4s ease;
    will-change: transform, opacity;
}
/* 向上滑出隐藏 */
.nav-wrap.hidden {
    transform: translateY(-110%); /* 隐藏到视口上方 */
    box-shadow: none;
    pointer-events: none;
}
.nav-wrap:not(.hidden) {
    transform: translateY(0);
    pointer-events: auto;
}
/* mobile-trigger 颜色切换：在置顶时维持白色（你已有白色），非置顶时变黑 */
.mobile-trigger.dark {
    color: var(--txt-dark) !important;
}

/* 小屏（媒体查询内）的 .mobile-trigger 你已有 color 的设置，这里仅做“优先级”颜色覆盖 */
@media (max-width: 767px) {
    .mobile-trigger { transition: color 220ms ease; }
    .mobile-trigger.dark { transition: color 220ms ease; }
}

.nav-inner{
    max-width:1200px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 0 24px;
    height: 4rem;
    gap: 16px;
    transition: padding 0.3s ease, gap 0.3s ease;
}
.logo{max-width: 200px;min-width: 100px;display:flex;align-items:center;gap:10px;color:var(--txt-light);font-weight:700;justify-self:start;}
.logo.adjusted {
    position: relative;
    left: -70px;
}
.logo img{height:56px;width: 100%}
nav{justify-self: center;text-align:center;height: 100%}
nav ul{display:flex;list-style:none;padding:0;margin:0;align-items:center}
nav ul li{
    position: relative;   /* 伪元素绝对定位的参照 */
    margin: 0 20px;
    height: 4rem;
    line-height: 4rem;
    padding: 0;
}
nav ul li a {
    position: relative;            /* 伪元素绝对定位的基准 */
    display: inline-block;         /* 确保宽度是文本宽度，便于动画 */
    /*padding-bottom: 6px;           !* 给伪元素留出空间（避免遮挡文本） *!*/
}
/*下划线*/
nav ul li a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;                   /* 使用 left+right 保证宽度与 a 一致 */
    bottom: 5px;
    height: 3px;
    background: var(--accent);
    transform: scaleX(0);       /* 初始为 0（不可见） */
    transform-origin: center;   /* 从中间开始扩展/收缩 */
    transition: transform 420ms cubic-bezier(0.2, 0.9, 0.2, 1);
    border-radius: 2px;
    pointer-events: none;
}
nav ul li:hover a::after,
nav ul li a:focus-visible::after {
    transform: scaleX(1);
}
/*小屏隐藏菜单下划线*/
@media (max-width: 767px) {
    nav ul li a::after { display: none; }
}
nav a{color:var(--footer-bg);text-decoration:none;font-size: 1rem;transition: color 180ms,font-size 0.3s ease;}
nav a:hover{color:#fff}

/* 中等屏幕响应式调整 */
@media (max-width: 966px) and (min-width: 768px) {
    /* 基础调整 */
    .nav-inner {
        padding: 0 16px;
        gap: 8px;
    }

    .logo.adjusted {
        left: -30px;
        max-width: 160px;
    }

    .lang-select.adjusted {
        right: -30px;
        min-width: 80px;
    }

    /* 导航项调整 */
    nav ul {
        flex-wrap: nowrap;
        overflow-x: auto; /* 水平滚动 */
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE */
    }

    nav ul::-webkit-scrollbar {
        display: none; /* Chrome Safari */
    }

    nav ul li {
        margin: 0 8px;
        flex-shrink: 0; /* 防止收缩 */
    }

    nav a {
        font-size: 0.88rem;
        white-space: nowrap;
    }

    /* 语言选择器优化 */
    .lang-trigger {
        padding: 6px 8px;
        font-size: 11px;
    }

    .lang-trigger::after {
        width: 10px;
        height: 6px;
        background-size: 10px 6px;
    }
}

/* 更窄的中等屏幕 */
@media (max-width: 850px) and (min-width: 768px) {
    nav ul li {
        margin: 0 6px;
    }

    nav a {
        font-size: 0.82rem;
    }

    .logo.adjusted {
        left: -20px;
        max-width: 140px;
    }

    .lang-select.adjusted {
        right: -20px;
        min-width: 70px;
    }

    .logo img {
        height: 46px;
    }
}


/* ---------- 三栏 mega 面板（每个 nav li 可含多个一级菜单） ---------- */
.nav-mega-panel {
    position: fixed;
    left: 0;
    width: 100%;
    height: 55vh;
    background: #fff;
    color: #111;
    z-index: 9997;
    box-shadow: 0 12px 40px rgba(2,6,23,0.12);
    overflow: auto;
    transform-origin: top center;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform 260ms cubic-bezier(.2,.9,.2,1), opacity 220ms ease;
    padding: 16px 10rem;
    box-sizing: border-box;
    /* 移除原来的 top 设置 */
}

.nav-mega-panel.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    /* 紧贴 #navWrap 底部 */
    top: var(--nav-wrap-height, 4rem); /* 默认高度，JS 会动态设置 */
}

.nav-mega-panel .mega-item {
    width: 100%;
    padding: 32px 0 22px 0;
    font-size: 26px;
    font-weight: 600;
    color: #111;
    margin-bottom: 10px;
    box-sizing: border-box;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.4;
}

/* 为了布局整齐，调整 .mega-inner 让标题在上方，三栏在下方 */
.nav-mega-panel .mega-inner {
    margin: 0 auto;
    display: flex;
    flex-direction: column; /* 改为列方向，标题在上 */
    gap: 12px;
    height: 100%;
    box-sizing: border-box;
    padding-left: 16px;
    padding-right: 16px;
}

/* 三栏容器放在 .mega-columns 中（上一版的 .mega-inner 三栏样式移入此类） */
.nav-mega-panel .mega-columns {
    display: flex;
    gap: 12px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    align-items: stretch;
    height: calc(75%); /* 留出标题高度的空间，按需调整 */
    box-sizing: border-box;
}

/* 左 / 中 / 右 列 */
.nav-mega-panel .mega-left {
    width: 26%;
    min-width: 180px;
    /*border-right: 1px solid rgba(0,0,0,0.04);*/
    /*padding-right: 18px;*/
    box-sizing: border-box;
    display:flex;
    flex-direction:column;
    gap:8px;
}
.nav-mega-panel .mega-left .primary-item .label {
    padding: 6px 0;
    font-size: 18px;
    display: flex;
    align-items: center;
    flex: 1;
}
.nav-mega-panel .mega-center {
    width: 32%;
    min-width: 260px;
    /*padding-right: 10px;*/
    box-sizing: border-box;
    /*border-right: 1px solid rgba(0,0,0,0.04);*/
}
.nav-mega-panel .mega-right {
    height: 70%;
    max-width: 42%;
    min-width: 440px;
    box-sizing: border-box;
    display:flex;
    justify-content:center;
    padding-left: 30px;
    border-left: 1px solid #eee;
}

/* 一级菜单项（左列） - 多个 primary */
.nav-mega-panel .primary-item {
    position: relative;
    padding: 10px 44px 10px 8px;
    min-height: 44px;
    cursor: pointer;
    display:flex;
    align-items: center;
    gap:10px;
    border-radius:6px;
    transition: background 160ms, color 160ms;
    color: #222;
    user-select: none;
    outline: none;
    line-height: 1;
}
.nav-mega-panel .primary-item .dot {
    width:3px;
    height:16px;
    background: transparent;
    border-radius:2px;
    flex-shrink:0;
    align-self: center;
}
.nav-mega-panel .primary-item.selected .dot { background: var(--accent); /* 选中左侧的强调条，可按需改色 */ }
.nav-mega-panel .primary-item .label {
    flex:1;
    font-weight:500;
}
.nav-mega-panel .primary-item:hover { /*background: rgba(11,116,222,0.06);*/ }
.nav-mega-panel .primary-item.selected {
    /*background: rgba(11,116,222,0.12);*/
    /*color: #0b74de;*/
}
.nav-mega-panel .primary-item .select-icon {
    position: absolute;
    right: 14px;                    /* 离 primary-item 右边缘 14px，可按需微调 */
    top: 50%;
    transform: translateY(-50%) translateX(6px); /* 初始微向右偏移（用于滑入效果） */
    width: 18px;
    height: 18px;
    opacity: 0;
    transition: opacity 180ms ease, transform 180ms cubic-bezier(.2,.9,.2,1);
    display: inline-block;
    vertical-align: middle;
    pointer-events: none;
    color: inherit;
}

/* 选中态显示并微滑入 */
.nav-mega-panel .primary-item.selected .select-icon,
.nav-mega-panel .primary-item:focus .select-icon,
.nav-mega-panel .primary-item:hover .select-icon {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}
.nav-mega-panel .primary-item.no-subs .select-icon,
.nav-mega-panel .primary-item[data-hassubs="0"] .select-icon {
    /* 隐藏图标（兼顾 opacity/transform 的过渡行为） */
    display: none !important;
    opacity: 0 !important;
    transform: translateY(-50%) translateX(6px) !important;
    pointer-events: none !important;
}

/* 保险覆盖：如果你仍然有 .primary-item.selected .select-icon 的规则，确保 no-subs 优先生效 */
.nav-mega-panel .primary-item.no-subs.selected .select-icon,
.nav-mega-panel .primary-item[data-hassubs="0"].selected .select-icon {
    display: none !important;
    opacity: 0 !important;
    transform: translateY(-50%) translateX(6px) !important;
}
.nav-mega-panel .primary-item.selected { color: var(--accent); }


/* 二级菜单（中列） */
.nav-mega-panel .secondary-list {
    flex-direction:column;
    gap:8px;
    align-items: stretch;
}
.nav-mega-panel .secondary-item {
    position: relative;
    min-height: 44px;
    padding: 16px 15px;
    border-radius:6px;
    cursor: pointer;
    transition: background 160ms cubic-bezier(.2,.9,.2,1), color 140ms;
    color: #333;
    display: flex;
    align-items: center;
    flex: 1;
    outline: none;
}
.nav-mega-panel .secondary-item .secondary-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none; /* 按需 */
}
.nav-mega-panel .secondary-item:hover,
.nav-mega-panel .secondary-item:focus,
.nav-mega-panel .secondary-item:focus-visible {
    background: rgba(11,116,222,0.06); /* 可改为 var(--accent) 的半透明 */
    color: var(--accent);
}
.nav-mega-panel .secondary-item::before {
    content: "";
    position: absolute;
    left: 8px;                       /* 从左边缘偏移 8px，和 padding-left 协调 */
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    transform-origin: center;
    width: 3px;
    height: 18px;                    /* 与 primary .dot 大小接近 */
    border-radius: 2px;
    background: var(--accent);             /* 竖杠颜色（与 dot 保持一致）*/
    transition: transform 200ms cubic-bezier(.2,.9,.2,1), opacity 160ms;
    opacity: 0;
    pointer-events: none;
}
.nav-mega-panel .secondary-item:hover::before,
.nav-mega-panel .secondary-item:focus::before,
.nav-mega-panel .secondary-item:focus-visible::before {
    transform: translateY(-50%) scaleY(1);
    opacity: 1;
}
.nav-mega-panel .secondary-item:focus {
    background: rgba(2,6,23,0.04);
    color: var(--accent);
}
/* ---------- 修复 mega 面板内 a 默认样式并扩大点击/悬停颜色继承 ---------- */
/* 让链接继承容器颜色，并填满容器（扩大点击面积） */
.nav-mega-panel .primary-item .primary-link,
.nav-mega-panel .primary-item .primary-link:link,
.nav-mega-panel .primary-item .primary-link:visited,
.nav-mega-panel .primary-item .primary-link:hover,
.nav-mega-panel .primary-item .primary-link:active,
.nav-mega-panel .primary-item .primary-link:focus {
    color: inherit !important;         /* 避免被其它通用规则覆盖（若不想用 !important 可去掉） */
    text-decoration: none !important;  /* 去掉下划线 */
    display: block;
    width: 100%;
    height: 100%;
    line-height: inherit;
    -webkit-tap-highlight-color: transparent;
}

/* 二级链接同理 */
.nav-mega-panel .secondary-item .secondary-link,
.nav-mega-panel .secondary-item .secondary-link:link,
.nav-mega-panel .secondary-item .secondary-link:visited,
.nav-mega-panel .secondary-item .secondary-link:hover,
.nav-mega-panel .secondary-item .secondary-link:active,
.nav-mega-panel .secondary-item .secondary-link:focus {
    color: inherit !important;
    text-decoration: none !important;
    display: block;
    width: 100%;
    height: 100%;
    line-height: inherit;
    -webkit-tap-highlight-color: transparent;
}

/* 鼠标悬停 / 选中态由容器控制颜色（使 a 自动继承） */
.nav-mega-panel .primary-item:hover,
.nav-mega-panel .primary-item:focus,
.nav-mega-panel .primary-item.selected {
    color: var(--accent);
}

.nav-mega-panel .secondary-item:hover,
.nav-mega-panel .secondary-item:focus,
.nav-mega-panel .secondary-item:focus-visible {
    color: var(--accent);
}

/* 如果你希望鼠标悬停时二级的竖条也生效（已有 ::before），确保 ::before 颜色随容器 color 变化 */
.nav-mega-panel .secondary-item::before { background: currentColor; }

/* 保持键盘无障碍：自定义 focus-visible（可见但不是浏览器默认 outline） */
.nav-mega-panel .primary-item:focus-visible,
.nav-mega-panel .secondary-item:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(43,110,223,0.14);
    border-radius: 6px;
}

/* （可选）如果你希望在 scrolled 状态下仍保持面板内链接颜色不被 nav-wrap 的规则覆盖，使用更高优先级选择器 */
.nav-mega-panel.is-open .primary-item .primary-link,
.nav-mega-panel.is-open .secondary-item .secondary-link {
    color: inherit !important;
}




/* 右侧图片盒子 */
.nav-mega-panel .mega-image {
    width: 100%;
    max-width: 360px;
    height: 100%;
    background: linear-gradient(180deg,#f6f6f6,#fff);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(2,6,23,0.06) inset;
    overflow: hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 10px;
}
.nav-mega-panel .mega-image img {
    max-width: 100%;
    max-height: 100%;
    display:block;
    object-fit: contain;
}

/* 占位信息样式 */
.nav-mega-panel .placeholder {
    color: rgba(0,0,0,0.35);
    font-size: 14px;
}

/* 小屏隐藏面板（移动端使用抽屉） */
@media (max-width: 767px) {
    .nav-mega-panel { display: none !important; }
}
/* 响应式调整 padding */
@media (max-width: 1200px) {
    .nav-mega-panel {
        padding: 16px 5rem;
    }
}
@media (max-width: 992px) {
    .nav-mega-panel {
        padding: 16px 2rem;
    }
}



/* language select */
.lang-select{justify-self:end;min-width:90px;text-align:right;position:relative;font-size: 12px;}
.lang-select.adjusted {
    position: relative;
    right: -90px;
}
.lang-select select { position: absolute; opacity: 0; pointer-events: none; }
.lang-trigger {
    width: 100%; padding: 6px 12px; border: 1px solid var(--footer-bg); border-radius: 8px;
    background: transparent; color: var(--footer-bg); cursor: pointer; transition: all 0.3s ease;
    display: flex; align-items: center; justify-content: space-between; position: relative;
}
.lang-trigger::after {
    content: ""; width: 12px; height: 8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23CBD8DF' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-size: 12px 8px; transition: transform 0.3s ease;
}
.lang-select.open .lang-trigger::after { transform: rotate(180deg); }
.lang-select:hover .lang-trigger, .lang-select.open .lang-trigger {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(11,116,222,0.12);
}
.lang-dropdown {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #fff; border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15); margin-top: 4px; opacity: 0; visibility: hidden;
    transform: translateY(-10px); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s; z-index: 100; overflow: hidden;
}
.lang-select.open .lang-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-option { padding: 12px 16px; color: #333; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; font-weight: 500; }
.lang-option:hover {
    background: #f0f7ff;
    color: var(--accent);
}
.lang-option.active {
    background: var(--accent);
    color: #fff;
}

/* scrolled */
.nav-wrap.scrolled{background: rgba(255,255,255,0.98);border-bottom:1px solid rgba(0,0,0,0.06);box-shadow:0 6px 24px rgba(22,28,37,0.12)}
.nav-wrap.scrolled .logo, .nav-wrap.scrolled nav a, .nav-wrap.scrolled .lang-trigger{color:var(--txt-dark)}
.nav-wrap.scrolled nav a{color:var(--txt-dark)}
.nav-wrap.scrolled .lang-trigger{border-color:rgba(0,0,0,0.2);}

/* mobile-dropdown base (panel style lives here so header can display mobile panel) */
.mobile-dropdown { display: none; }
@media (max-width: 767px) {
    .mobile-dropdown { position: relative; }
    .mobile-dropdown::before { content: ""; display: none; }
    .mobile-dropdown.open::before {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.45);
        z-index: 9998;
        opacity: 1;
        transition: opacity 240ms ease;
    }
    .mobile-panel {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: 260px;
        max-width: 100%;
        background: #ffffff;
        color: #111;
        border-radius: 8px 0 0 8px;
        box-shadow: -12px 30px 60px rgba(2,6,23,0.18);
        overflow-y: auto;
        padding-top: 96px;
        padding-right: 60px;
        transform: translateX(100%);
        transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
        z-index: 9999;
        pointer-events: auto;
    }
    .mobile-dropdown.open .mobile-trigger { color: var(--txt-dark); }
    .mobile-dropdown.open .mobile-panel { transform: translateX(0); opacity: 1; }
    .mobile-panel a {
        display: block;
        text-align: right;
        height: 65px;
        text-decoration: none;
        color: inherit;
        font-size: 16px;
    }
    .no-scroll { overflow: hidden !important; height: 100%; }
    .mobile-trigger { width:38px; height:38px; padding:0; position: relative; z-index: 10000; border:none; background:transparent; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; color:var(--footer-bg); }
    .icon-bars rect {
        transition: transform 220ms cubic-bezier(.2,.9,.2,1), opacity 180ms ease;
        transform-box: fill-box;
        transform-origin: center;
    }
    .mobile-lang-selector {
        position: absolute;
        bottom: 90px;
        right: 60px;
        display: flex;
        align-items: center;
        gap: 12px;
        line-height: 63px;
    }
    .mobile-lang-btn {
        background: none;
        border: none;
        padding: 0;
        margin: 0;
        color: var(--txt-dark);
        font-size: 16px;
        cursor: pointer;
        line-height: 1.5;
    }
    .mobile-lang-btn + .mobile-lang-btn {
        position: relative;
        padding-left: 12px;
    }
    .mobile-lang-btn + .mobile-lang-btn::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 0.15rem;
        height: 1em;
        background: #A68A8A;
    }
}

/* small view adjustments (logo centering behaviour) */
@media(max-width: 767px){ .nav-inner{ padding:12px 16px; gap:8px; } .hero-content h1{font-size:28px} nav ul{gap:20px} .logo{transform:translateX(-4px)} }

/* ========== 手机/窄屏：仅显示并居中 logo ========== */
@media(max-width: 767px) {
    .nav-inner {
        justify-content: center !important;
        padding: 12px 16px;
        gap: 0;
    }
    .nav-inner > *:not(.logo) {
        display: none !important;
    }
    .nav-inner > .mobile-dropdown {
        display: block !important;
    }
    .nav-inner .logo,
    .nav-inner .logo.adjusted {
        position: static !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
    }
    .nav-inner .logo img {
        height: 46px;
        width: auto;
        max-width: 100%;
        display: block;
    }
}


/* === mobile-subpanel（移动覆盖层）样式 === */
.mobile-subpanel{
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    max-width: 100%;
    background: #ffffff;
    color: #111;
    z-index: 10001;
    box-sizing: border-box;
    padding-top: 60px; /* 保留原来的顶部留白位置 */
    overflow-y: auto;
    border-radius: 8px 0 0 8px;
    box-shadow: -12px 30px 60px rgba(2,6,23,0.18);
    transform: translateX(100%);              /* 初始隐藏（右侧不可见） */
    transition: transform 300ms ease-in-out, opacity 200ms ease;
    pointer-events: auto;
}

/* 通过 class 控制显示隐藏（JS 切换 .is-visible） */
.mobile-subpanel.is-visible{
    transform: translateX(0);
}

/* header（返回箭头 + 标题） */
.mobile-subpanel-header{
    position: absolute;
    left: 0;
    top: 14px;
    right: 0;
    height: 48px;
    display: flex;
    align-items: center;
    gap: 4px;
    box-sizing: border-box;
    padding: 5px 0;
}

/* 返回按钮 */
.mobile-subpanel-back{
    border: none;
    background: transparent;
    padding: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* 标题 */
.mobile-subpanel-title{
    font-size: 18px;
    font-weight: 600;
    flex: 1;
    text-align: left;
}

/* 内容区 — 注意：已去掉 margin-top */
.mobile-subpanel-content{
    padding: 12px 16px;
    box-sizing: border-box;
    /* margin-top 已移除 */
}

/* 一级菜单按钮（去掉下边框，左右布局，右侧放图标） */
.mobile-subpanel-primary{
    width: 100%;
    text-align: left;
    padding: 16px 10px;
    border: none;                  /* 已改为无边框 */
    background: transparent;
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between; /* 文本左，图标右 */
    box-sizing: border-box;
    font-size: 16px;
    color: inherit;
}

/* 文本部分保证占满剩余空间 */
.mobile-subpanel-primary-label{
    flex: 1;
    text-align: left;
    font-size: 18px;
    font-weight: 600;
    display: inline-flex !important;
    align-items: center !important;
    height: 100%;
    line-height: 1;
    padding-top: 0;
    padding-bottom: 0;
}

/* 右侧图标容器（留出位置） */
.mobile-subpanel-primary-icon{
    flex: 0 0 auto;
    margin-left: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* placeholder 样式 */
.mobile-subpanel .placeholder{
    color: rgba(0,0,0,0.35);
    font-size: 14px;
}

/* === mobile-subpanel 二级菜单相关样式 === */
.mobile-subpanel-primary-wrap {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

/* primary 本身（保持之前样式） */
.mobile-subpanel-primary {
    width: 100%;
    text-align: left;
    padding: 12px 10px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    font-size: 16px;
    color: inherit;
}

/* 右侧 icon */
.mobile-subpanel-primary-icon {
    flex: 0 0 auto;
    margin-left: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 默认箭头平滑过渡（右 -> 下 由 rotate 控制） */
.mobile-subpanel-primary-icon svg {
    transition: transform 200ms ease;
    transform-origin: 50% 50%;
}

/* 展开状态时旋转箭头（右 -> 下） */
.mobile-subpanel-primary.expanded .mobile-subpanel-primary-icon svg {
    transform: rotate(90deg);
}

/* 二级菜单容器（折叠动画使用 max-height） */
.mobile-subpanel-secondary {
    overflow: hidden;
    max-height: 0;
    transition: max-height 240ms ease;
    box-sizing: border-box;
    background: transparent;
}

/* 二级项样式 */
.mobile-subpanel-secondary-item {
    padding: 10px 20px;
    font-size: 16px;
    color: #444;
    cursor: pointer;
    box-sizing: border-box;
}

/* 占位文本样式保持 */
.mobile-subpanel .placeholder {
    color: rgba(0,0,0,0.35);
    font-size: 14px;
}
/* 分割线（在内容与图片之间） */
.mobile-subpanel-divider {
    height: 1px;
    background: rgba(0,0,0,0.06);
    margin-top: 10px;
    width: 100%;
    box-sizing: border-box;
    display: none;
}

/* 预览图片区域（默认隐藏） */
.mobile-subpanel-preview {
    padding: 26px 16px 12px 16px;
    box-sizing: border-box;
    display: none; /* JS 控制显示/隐藏 */
}

/* 图片样式 */
.mobile-subpanel-preview img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
    max-height: 320px;
    object-fit: cover;
}