@font-face {
    font-family: 'Alibaba PuHuiTi';
    src: url('/assets/fonts/Alibaba-PuHuiTi-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
:root{
    --accent:#7B292B;
    --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;
    --a-color: #A63A3A;
    --txt-666: #666;
    --txt-666666: #666666;
    --txt-222: #222;
    --footer-muted: #8b8b8b;
    --gray-bg: #F4F4F4;
    --link-active-bg: transparent;
    --site-sans: "Alibaba PuHuiTi", "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", "Heiti SC", sans-serif;
}

*{ 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;
}
a { color: var(--a-color); text-decoration: none; }
.fs14{ font-size:14px !important;}
.fs16{ font-size:16px !important;}
.fs18{ font-size:18px !important;}
.fs20{ font-size:20px !important;}
@media (hover: none) and (pointer: coarse) {
    a, button, input[type="button"], input[type="submit"], .clickable {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        background: transparent !important;
        box-shadow: none !important;
        outline: none !important;
    }
    a:active, a:focus, a:focus-visible, button:active, button:focus, .clickable:active {
        background: transparent !important;
        box-shadow: none !important;
        outline: none !important;
    }
}
header{position:fixed;left:0;right:0;top:0;z-index:998}
header:has(.nav-wrap.hidden){ pointer-events: none; }
header:has(.nav-wrap:not(.hidden)){ pointer-events: auto; }
.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;
    will-change: transform, opacity;
    transition: transform 0.6s ease, background-color 0.6s ease, box-shadow 0.6s ease, border-bottom 0.6s ease;
}
.nav-wrap.hidden{ transform: translateY(-110%); box-shadow: none; pointer-events: none; }
.nav-wrap:not(.hidden){ transform: translateY(0); pointer-events: auto; }
.mobile-trigger.dark{ color: var(--txt-dark) !important; }
@media (max-width: 767px){ .mobile-trigger{ transition: color 220ms ease; } .mobile-trigger.dark{ transition: color 220ms ease; } }

/* ========== 导航容器布局 ========== */
.nav-inner{
    max-width:1400px;
    width: 100%;
    margin:0 auto;
    display:flex;
    align-items:center;
    padding: 0 24px;
    height: 4.5rem;
    gap: 24px;
    transition: padding 0.3s ease, gap 0.3s ease;
    justify-content: space-between;
}

.logo{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--txt-light);
    font-weight:700;
    flex: 0 1 auto;
    max-width: 200px;
}
.logo.adjusted{
    position: relative;
    flex: 0 1 auto;
    max-width: 180px;
    min-width: 120px;
}
.logo a { display: inline-flex; align-items: center; line-height: 0; }
.logo img {
    display: block;
    height: 56px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* ========== 导航区域 ========== */
nav{
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    overflow: visible !important;
    min-width: 0;
}
nav ul{
    display:flex;
    list-style:none;
    padding:0;
    margin:0;
    align-items:center;
    flex-wrap: nowrap;
    gap: 0;
    justify-content: center;
    max-width: 100%;
    height: 100%;
}
nav ul li{
    position:relative;
    margin:0 12px;
    height: 4rem;
    line-height:4rem;
    padding:0;
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
}
nav ul li a{
    position:relative;
    display:inline-block;
    white-space:nowrap;
    font-size:0.95rem;
    transition: font-size 0.3s ease;
}
nav ul li a::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:5px;
    height:3px;
    background:var(--accent);
    transform:scaleX(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:0.95rem; transition:color 180ms,font-size 0.3s ease; }
nav a:hover{ color:#fff; }

/* ========== 语言选择器 ========== */
.lang-select{
    flex: 0 1 auto;
    display: inline-flex;
    align-items: center;
    position: relative;
    min-width: 0;
    height: 100%;
    white-space: nowrap;
}
.lang-select.adjusted{
    margin-left: 0;
    padding-left: 0;
    flex: 0 1 auto;
    max-width: 180px;
}
.lang-select select{ position:absolute; opacity:0; pointer-events:none; }
.lang-trigger{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: max-content;
    min-width: 70px;
    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;
    white-space: nowrap;
    font-size: 0.9rem;
}
.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;
    margin-left: 8px;
}
.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(85%); 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:9999; 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; white-space:nowrap; font-size: 14px;
}
.lang-option:hover{ background:#f0f7ff; color:var(--accent); }
.lang-option.active{ background:var(--accent); color:#fff; }

/* 滚动状态 */
.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 .lang-trigger{ border-color:rgba(0,0,0,0.2); }

/* ---------- 响应式：自动弹性间距，菜单永不遮挡 ---------- */
@media (max-width:1200px) and (min-width:768px){
    .nav-inner{ padding:0 20px; gap: 20px; }
    .logo.adjusted{ max-width: 160px; }
    .logo img{ height: 48px; }
    nav ul li{ margin:0 10px; }
}
@media (max-width:992px) and (min-width:768px){
    .nav-inner{ padding:0 16px; gap: 16px; }
    .logo.adjusted{ max-width: 150px; }
    .logo img{ height: 44px; }
    nav ul li{ margin:0 8px; }
    nav a{ font-size:0.9rem; }
}
@media (max-width:850px) and (min-width:768px){
    .nav-inner{ padding:0 12px; gap: 12px; }
    .logo.adjusted{ max-width: 130px; }
    .logo img{ height: 40px; }
    nav ul li{ margin:0 6px; }
    nav a{ font-size:0.85rem; }
    .lang-trigger{ padding:5px 10px; font-size:0.85rem; }
}

/* 桌面端完全隐藏移动面板 */
@media (min-width: 768px) {
    .mobile-panel {
        display: none !important;
    }
}
/* 移动端布局 */
@media(max-width:767px){
    .nav-inner{ justify-content:center !important; padding:12px 16px; gap:0; }
    .nav-inner > *:not(.logo):not(.mobile-dropdown){ display:none !important; }
    .nav-inner > .mobile-dropdown{ display:block !important; }
    .logo, .logo.adjusted{
        position: static !important; left: 0 !important; right: 0 !important; transform: none !important;
        margin: 0 auto; display: flex; align-items: center; justify-content: center; min-width: 0;
    }
    .logo img{ height:46px; width:auto; max-width:100%; display:block; }
}

/* Mega 面板 */
.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;
}
.nav-mega-panel.is-open{ transform:translateY(0); opacity:1; pointer-events:auto; top:var(--nav-wrap-height,4rem); }
.nav-mega-panel .mega-item{ width:100%; padding:32px 0 22px 0; font-size:26px; font-weight:600; color:#111; margin-bottom:10px; max-width:1200px; margin-left:auto; margin-right:auto; line-height:1.4; }
.nav-mega-panel .mega-inner{ margin:0 auto; display:flex; flex-direction:column; gap:12px; height:100%; padding-left:16px; padding-right:16px; }
.nav-mega-panel .mega-columns{ display:flex; gap:12px; max-width:1200px; margin-left:auto; margin-right:auto; align-items:stretch; height:calc(75%); }
.nav-mega-panel .mega-left{ width:26%; min-width:180px; display:flex; flex-direction:column; gap:8px; }
.nav-mega-panel .mega-center{ width:32%; min-width:260px; }
.nav-mega-panel .mega-right{ height:70%; max-width:42%; min-width:440px; display:flex; justify-content:center; padding-left:30px; border-left:1px solid #eee; }
.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;
    overflow: hidden; white-space: nowrap;
}
.nav-mega-panel .primary-item .dot{ width:3px; height:16px; background:transparent; border-radius:2px; flex-shrink:0; }
.nav-mega-panel .primary-item.selected .dot{ background:var(--accent); }
.nav-mega-panel .primary-item .label{ flex:1; font-weight:500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-mega-panel .primary-item.selected{ color:var(--accent); }
.nav-mega-panel .select-icon{
    position:absolute; right: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); 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{ display:none !important; }

.nav-mega-panel .secondary-list{ flex-direction:column; gap:8px; }
.nav-mega-panel .secondary-item{
    position:relative; min-height:44px; padding:16px 15px; border-radius:6px; cursor:pointer; color:#333; display:flex; align-items:center; flex:1; outline:none;
}
.nav-mega-panel a,
.nav-mega-panel a:link,
.nav-mega-panel a:visited,
.nav-mega-panel a:hover,
.nav-mega-panel a:active {
    text-decoration: none !important;
    color: inherit !important;
}
.nav-mega-panel .secondary-item .secondary-link{ display:block; width:100%; height:100%; }
.nav-mega-panel .secondary-item:hover, .nav-mega-panel .secondary-item:focus{ background:rgba(11,116,222,0.06); color:var(--accent); }
.nav-mega-panel .secondary-item::before{
    content:""; position:absolute; left:8px; top:50%; transform:translateY(-50%) scaleY(0); width:3px; height:18px;
    border-radius:2px; background:var(--accent); transition:transform 200ms cubic-bezier(.2,.9,.2,1), opacity 160ms; opacity:0;
}
.nav-mega-panel .secondary-item:hover::before{ transform:translateY(-50%) scaleY(1); opacity:1; }
.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; } }
@media (max-width:1200px){ .nav-mega-panel{ padding:16px 5rem; } }
@media (max-width:992px){ .nav-mega-panel{ padding:16px 2rem; } }

/* 动画 */
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(16px); }
    to { opacity: 1; transform: translateX(0); }
}
.nav-mega-panel.is-open .mega-item,
.nav-mega-panel.is-open .mega-left .primary-item,
.nav-mega-panel.is-open .mega-right .mega-image {
    animation: fadeInDown 0.35s cubic-bezier(.2,.9,.2,1) forwards;
    opacity: 0;
}
.nav-mega-panel.is-open .mega-item { animation-delay: 0.05s; }
.nav-mega-panel.is-open .mega-left .primary-item { animation-delay: calc(0.06s * var(--i, 1)); opacity: 0; }
.nav-mega-panel.is-open .mega-right .mega-image { animation-delay: 0.1s; }
.nav-mega-panel .secondary-item {
    opacity: 0;
    animation: slideInLeft 0.28s cubic-bezier(.2,.9,.2,1) forwards;
    animation-play-state: paused;
}
.nav-mega-panel.is-open .secondary-item {
    animation-play-state: running;
    animation-delay: calc(0.06s * var(--i, 0));
}
.nav-mega-panel:not(.is-open) .secondary-item { animation: none !important; opacity: 0 !important; }

/* 移动端抽屉 */
.mobile-dropdown{ display:none; }
@media (max-width:767px){
    .mobile-dropdown{ position:absolute; right:16px; }
    .mobile-dropdown::before{ content:""; display:none; }
    .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:10000; pointer-events:none;
    }
    .mobile-panel.open {
        transform: translateX(0);
        opacity: 1;
        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;
    }
    .mobile-panel-close {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
        background: none;
        border: none;
        cursor: pointer;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    .mobile-panel-close img {
        width: 25px;
        height: 25px;
        display: block;
    }
    .mobile-lang-selector{
        position:absolute; bottom:90px; left:20px; right:20px; display:flex; flex-wrap:wrap; justify-content:center;
        gap:8px 16px; line-height:1.5;
    }
    .mobile-lang-btn{
        background:none; border:none; padding:4px 8px; margin:0; color:var(--txt-dark); font-size:16px; cursor:pointer; line-height:1.5;
    }
    .mobile-lang-btn + .mobile-lang-btn{ padding-left:8px; }
    .mobile-lang-btn + .mobile-lang-btn::before{ display:none; }
}