/* ============================================================
   第一部分：全局样式和基础重置
   ============================================================ */

/* --- 基础重置 --- */
*, *::before, *::after { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
}

/* HTML 基础设置 */
html { 
    font-size: 16px; 
    scroll-behavior: smooth; 
    overflow-x: hidden !important; 
}

/* Body 基础样式 */
body { 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    line-height: 1.6; 
    color: #333; 
    background: #000; 
    overflow-x: hidden !important; 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    position: relative; 
}

/* ============================================================
   第二部分：布局和背景样式（通用）
   ============================================================ */

/* --- 通用颜色定义 --- */
/* 这些颜色类可以被任何元素使用 */

/* 基础颜色 */
.color-white {
    color: #fff;
}

.color-black {
    color: #111;
}

.bg-white {
    background-color: #fff;
}

.bg-white-hover:hover {
    background-color: #f8f9fa;
}

.bg-white-active:active {
    background-color: #f8f9fa;
}

.bg-black {
    background-color: #111;
}

/* 透明背景 */
.bg-transparent {
    background-color: transparent;
}

/* 橙色系 */
.color-orange {
    color: #ff6b35;
}

.bg-orange {
    background-color: #ff6b35;
}

.bg-orange-hover:hover {
    background-color: #ff8c5a;
}

.bg-orange-active:active {
    background-color: #ff8c5a;
}

.border-orange {
    border-color: #ff6b35;
}

/* 红色系 */
.color-red {
    color: #dc3545;
}

.bg-red {
    background-color: #dc3545;
}

.bg-red-hover:hover {
    background-color: #c82333;
}

.bg-red-active:active {
    background-color: #c82333;
}

.border-red {
    border-color: #dc3545;
}

/* 蓝色系 */
.color-blue {
    color: #007bff;
}

.bg-blue {
    background-color: #007bff;
}

.bg-blue-hover:hover {
    background-color: #0056b3;
}

.bg-blue-active:active {
    background-color: #0056b3;
}

.border-blue {
    border-color: #007bff;
}

/* 绿色系 */
.color-green {
    color: #28a745;
}

.bg-green {
    background-color: #28a745;
}

.bg-green-hover:hover {
    background-color: #218838;
}

.bg-green-active:active {
    background-color: #218838;
}

.border-green {
    border-color: #28a745;
}

/* 黄色系 */
.color-yellow {
    color: #ffc107;
}

.bg-yellow {
    background-color: #ffc107;
}

.bg-yellow-hover:hover {
    background-color: #e0a800;
}

.bg-yellow-active:active {
    background-color: #e0a800;
}

.border-yellow {
    border-color: #ffc107;
}

/* 灰色系 */
.color-gray {
    color: #6c757d;
}

.bg-gray {
    background-color: #6c757d;
}

.bg-gray-hover:hover {
    background-color: #5a6268;
}

.bg-gray-active:active {
    background-color: #5a6268;
}

.border-gray {
    border-color: #6c757d;
}

/* --- 文档容器 --- */
/* 主文档容器，使用 flex 布局 */
.inidac-document { 
    position: relative; 
    min-height: 100vh; 
    color: #fff; 
    display: flex; 
    flex-direction: column; 
}

/* --- 背景层 --- */
/* 道路背景层（最上层） */
.inidac-document--bgRoad { 
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: -1; 
    width: 100%; 
    height: 7600px; 
    background: center top / 100% 100% repeat-y; 
    pointer-events: none; 
    background-image: url('/images/bg_road@pc.png.webp'); 
}

/* 渐变背景层（中间层，支持淡入淡出动画） */
.inidac-document--bgMangaGrad { 
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: -2; 
    width: 100%; 
    height: 6000px; 
    background: 10% 0% / 100% 100% no-repeat; 
    background-color: rgba(0, 0, 0, 0.2); 
    mix-blend-mode: multiply; 
    background-image: linear-gradient(92deg, #ff6c03 30%, #fc0 70%, #fc0); 
    pointer-events: none; 
    transition: opacity 5s ease-in-out; 
}

/* 渐变背景层状态控制 */
#bgMangaGrad1 { opacity: 1; }
#bgMangaGrad2 { opacity: 0; }
.inidac-document--bgMangaGrad.fade-out { opacity: 0; }
.inidac-document--bgMangaGrad.fade-in { opacity: 1; }

/* 漫画背景层（最底层） */
.inidac-document--bgManga { 
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: -3; 
    width: 100%; 
    height: 6000px; 
    background: #b56648 center top / 1920px 2650px repeat; 
    pointer-events: none; 
    background-image: url('/images/bg@pc.jpg.webp'); 
}

/* --- 内容区域 --- */
/* 主内容区域容器（所有页面通用） */
.content_area { 
    position: relative; 
    z-index: 10; 
    min-width: 940px; 
    max-width: 1430px; 
    width: 100%; 
    margin: 0 auto 20px; 
    box-sizing: border-box; 
    overflow: visible; 
    animation: fadeInUp 0.8s ease-out; 
}

/* 内容区域响应式调整 */
@media screen and (max-width: 1780px) { 
    .content_area { 
        min-width: auto; 
        width: 100%; 
        margin-left: 0 !important; 
    } 
}

/* 主内容区域（用于页面主体内容） */
.main-content { 
    flex: 1; 
    margin-top: 100px; 
    max-width: 1200px; 
    width: 100%; 
    margin-left: auto; 
    margin-right: auto; 
    box-sizing: border-box; 
    overflow: visible; 
}

/* 移动端主内容区域调整 */
@media screen and (max-width: 1388px) {
    .main-content { 
        padding: 0 1.5rem 0 1rem; 
        margin-top: 100px; 
    }
}
/* ============================================================
   第三部分：全局导航栏样式（通用）
   ============================================================ */

/* --- 导航栏容器 --- */
/* 全局导航栏主容器 */
.inidac-nav { 
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: 600; 
    width: 100%; 
    transform: translateY(0) !important; 
    transition: transform 0.3s ease; 
}

/* --- 导航栏一级菜单 --- */
/* 导航栏一级菜单容器 */
.inidac-nav-1st { 
    position: relative; 
    z-index: 1; 
    margin-top: -8px; 
    height: 85px; 
    background-color: #222; 
    box-shadow: 0 -3rem 3rem 1rem #000; 
    display: flex; 
    align-items: center; 
    transition: all 0.3s ease; 
}

/* 导航栏滚动后缩小效果（桌面端） */
@media screen and (min-width: 769px) { 
    .inidac-nav-1st.scrolled { 
        height: 50px; 
        margin-top: 0; 
    } 
    .inidac-nav-1st.scrolled .inidac-nav-1st-item { 
        height: 50px; 
    } 
    .inidac-nav-1st.scrolled .inidac-nav-1st-link { 
        font-size: 0.8rem; 
    } 
    .inidac-nav-1st.scrolled .inidac-nav-1st-link:hover { 
        background: linear-gradient(to bottom, #fff, #f4f4f4); 
        box-shadow: 0 0 1rem -0.5rem #000; 
        transform: translate(-2px, 4px) skewX(-20deg); 
        color: #000; 
        height: 55px; 
        margin-top: -5px; 
    } 
}

/* --- 导航菜单列表 --- */
/* 导航菜单列表容器 */
.inidac-nav-1st-menu { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    flex-wrap: nowrap; 
    width: calc(100% - 260px); 
    max-width: 1280px; 
    min-width: 800px; 
    margin: 0 auto; 
    list-style: none; 
    padding: 0; 
}

/* --- 导航菜单项 --- */
/* 单个导航菜单项 */
.inidac-nav-1st-item { 
    flex: 0 0 auto; 
    height: 85px; 
    transition: all 0.3s ease; 
    white-space: nowrap; 
}

/* 隐藏第一个菜单项（通常是 logo） */
.inidac-nav-1st-item:first-child { 
    display: none; 
}

/* --- 导航链接 --- */
/* 导航链接基础样式 */
.inidac-nav-1st-link { 
    color: #fff; 
    user-select: none; 
    position: relative; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    height: 100%; 
    margin-left: -1px; 
    padding: 4px 20px 0; 
    border-right: 1px solid #555; 
    border-left: 1px solid #555; 
    transform: skewX(-20deg); 
    transition: all 0.3s ease; 
    background-color: #222; 
    text-decoration: none; 
    font-weight: bold; 
    font-size: 1.2rem; 
}

/* 导航链接背景装饰 */
.inidac-nav-1st-link::after { 
    content: ''; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background: center center / auto no-repeat; 
    transform: skewX(20deg); 
    background-size: auto 18%; 
    z-index: -1; 
}

/* 导航链接悬停效果 */
.inidac-nav-1st-link:hover { 
    background: linear-gradient(to bottom, #fff, #f4f4f4); 
    box-shadow: 0 0 1rem -0.5rem #000; 
    transform: translate(-2px, 4px) skewX(-20deg); 
    color: #000; 
}

.inidac-nav-1st-link:hover::after { 
    transform: skewX(20deg); 
    filter: brightness(2%); 
}

/* --- 移动端导航栏样式 --- */
/* 移动端菜单切换按钮 */
.inidac-nav-toggle { 
    display: none; 
    position: fixed; 
    top: 1rem; 
    right: 1rem; 
    z-index: 1001; 
    background: #222; 
    border: 2px solid #555; 
    border-radius: 5px; 
    padding: 0.5rem; 
    cursor: pointer; 
    transition: all 0.3s ease; 
}

/* 移动端菜单按钮显示（小屏幕） */
@media screen and (max-width: 768px) { 
    .inidac-nav-toggle { 
        display: block; 
        position: fixed; 
        top: 1rem; 
        right: 1rem; 
        z-index: 1003; 
    } 
}

/* 移动端菜单按钮悬停效果 */
.inidac-nav-toggle:hover { 
    background: #333; 
    border-color: #ff6b35; 
}

/* 移动端禁用菜单按钮 hover 效果 */
@media screen and (max-width: 768px) {
    .inidac-nav-toggle:hover { 
        background: #222; 
        border-color: #555; 
    }
    /* 移动端菜单按钮 active 效果（使用原来的 hover 效果） */
    .inidac-nav-toggle:active { 
        background: #333; 
        border-color: #ff6b35; 
    }
}

/* 移动端菜单按钮图标（三条横线） */
.inidac-nav-toggle span { 
    display: block; 
    width: 25px; 
    height: 3px; 
    background: #fff; 
    margin: 4px 0; 
    transition: all 0.3s ease; 
    transform-origin: center; 
}

/* 移动端菜单按钮激活状态（变成 X） */
.inidac-nav-toggle.active span:nth-child(1) { 
    transform: rotate(45deg) translate(5px, 5px); 
}
.inidac-nav-toggle.active span:nth-child(2) { 
    opacity: 0; 
}
.inidac-nav-toggle.active span:nth-child(3) { 
    transform: rotate(-45deg) translate(7px, -6px); 
}

/* 桌面端隐藏移动端菜单按钮 */
@media screen and (min-width: 769px) { 
    .inidac-nav-toggle { 
        display: none !important; 
    } 
}

/* 移动端Logo文字 - 桌面端隐藏 */
.mobile-logo {
    display: none;
}

/* 移动端Logo文字样式 */
@media screen and (max-width: 768px) {
    .mobile-logo {
        display: block;
        position: fixed;
        top: 1rem;
        left: 1.5rem;
        z-index: 1002;
        color: #fff;
        font-size: 1.5rem;
        font-weight: 700;
        font-family: 'Noto Sans JP', sans-serif;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    }
}

/* 移动端导航栏展开状态 */
@media screen and (max-width: 768px) {
    /* 移动端菜单打开时禁止 body 滚动 */
    body.mobile-menu-open { 
        overflow: hidden; 
        margin: 0; 
        padding: 0; 
    }
    
    /* 移动端导航栏基础样式 */
    .inidac-nav-1st { 
        position: fixed; 
        top: 0; 
        left: 0; 
        width: 100%; 
        height: 85px; 
        background-color: #222; 
        box-shadow: 0 -3rem 3rem 1rem #000; 
        transition: all 0.3s ease; 
        z-index: 1000; 
        display: flex; 
        align-items: center; 
        justify-content: space-between; 
        overflow: hidden; 
    }
    
    /* 移动端导航栏展开状态 */
    .inidac-nav-1st.mobile-open { 
        height: 100vh !important; 
        width: 100vw !important; 
        background: linear-gradient(135deg, rgba(34, 34, 34, 0.98) 0%, rgba(0, 0, 0, 0.95) 100%) !important; 
        backdrop-filter: blur(10px); 
        position: fixed !important; 
        top: 0 !important; 
        left: 0 !important; 
        right: 0 !important; 
        bottom: 0 !important; 
        z-index: 1000; 
        overflow: hidden; 
        margin: 0 !important; 
        padding: 0 !important; 
    }
    
    .inidac-nav-1st.mobile-open::before { 
        content: ''; 
        position: fixed; 
        top: 0; 
        left: 0; 
        width: 100vw; 
        height: 100vh; 
        background: linear-gradient(135deg, rgba(34, 34, 34, 0.98) 0%, rgba(0, 0, 0, 0.95) 100%); 
        backdrop-filter: blur(10px); 
        z-index: -1; 
    }
    
    /* 移动端导航栏关闭动画 */
    .inidac-nav-1st.mobile-closing { 
        height: 85px; 
        background-color: #222; 
        backdrop-filter: none; 
    }
    
    .inidac-nav-1st.mobile-closing .inidac-nav-1st-item { 
        opacity: 0; 
        transform: translateY(30px); 
        transition: all 0.2s ease; 
    }
    
    /* 移动端菜单列表样式 */
    .inidac-nav-1st-menu { 
        flex-direction: row; 
        gap: 0.5rem; 
        width: 100%; 
        min-width: auto; 
        padding: 0 4rem 0 1rem; 
        align-items: center; 
        justify-content: flex-end; 
        transition: all 0.3s ease; 
    }
    
    .inidac-nav-1st.mobile-open .inidac-nav-1st-menu { 
        flex-direction: column; 
        gap: 1rem; 
        padding: 1rem; 
        align-items: center; 
        justify-content: center; 
        height: 100vh; 
        width: 100vw; 
        position: absolute; 
        top: 0; 
        left: 0; 
        z-index: 1001; 
        display: flex; 
        margin: 0; 
        box-sizing: border-box; 
        overflow: hidden; 
        list-style: none; 
    }
    
    /* 移动端菜单项样式 */
    .inidac-nav-1st-item { 
        flex: none; 
        height: auto; 
        opacity: 0; 
        transform: translateY(0); 
        transition: all 0.3s ease; 
        display: none; 
    }
    
    .inidac-nav-1st.mobile-open .inidac-nav-1st-item { 
        width: 100%; 
        max-width: 280px; 
        opacity: 0; 
        transform: translateY(30px); 
        display: block; 
        position: relative; 
        z-index: 1002; 
    }
    
    /* 移动端菜单项依次出现动画 */
    .inidac-nav-1st.mobile-open .inidac-nav-1st-item:nth-child(1) { 
        animation: slideInUp 0.4s ease 0.1s forwards; 
    }
    .inidac-nav-1st.mobile-open .inidac-nav-1st-item:nth-child(2) { 
        animation: slideInUp 0.4s ease 0.2s forwards; 
    }
    .inidac-nav-1st.mobile-open .inidac-nav-1st-item:nth-child(3) { 
        animation: slideInUp 0.4s ease 0.3s forwards; 
    }
    .inidac-nav-1st.mobile-open .inidac-nav-1st-item:nth-child(4) { 
        animation: slideInUp 0.4s ease 0.4s forwards; 
    }
    .inidac-nav-1st.mobile-open .inidac-nav-1st-item:nth-child(5) { 
        animation: slideInUp 0.4s ease 0.5s forwards; 
    }
    .inidac-nav-1st.mobile-open .inidac-nav-1st-item:nth-child(6) { 
        animation: slideInUp 0.4s ease 0.6s forwards; 
    }
    .inidac-nav-1st.mobile-open .inidac-nav-1st-item:nth-child(7) { 
        animation: slideInUp 0.4s ease 0.7s forwards; 
    }
    
    /* 移动端导航链接样式 */
    .inidac-nav-1st-link { 
        font-size: 0.9rem; 
        padding: 0.3rem 0.8rem; 
        text-align: center; 
        border: 1px solid #555; 
        border-radius: 5px; 
        background-color: #222; 
        transition: 120ms transform cubic-bezier(0.3, 0.5, 0.6, 2.4); 
        color: #fff; 
        transform: skewX(-20deg); 
        white-space: nowrap; 
        text-decoration: none; 
        font-weight: bold; 
        position: relative; 
    }
    
    .inidac-nav-1st-link::after { 
        content: ''; 
        position: absolute; 
        top: 0; 
        left: 0; 
        width: 100%; 
        height: 100%; 
        background: center center / auto no-repeat; 
        transform: skewX(20deg); 
        background-size: auto 18%; 
        z-index: -1; 
        border-radius: 5px; 
    }
    
    .inidac-nav-1st.mobile-open .inidac-nav-1st-link { 
        font-size: 1.2rem; 
        padding: 1rem 1.5rem; 
        width: 100%; 
        max-width: 280px; 
        border: 2px solid #555; 
        border-radius: 8px; 
        background-color: #222; 
        color: #fff; 
        transform: skewX(-20deg); 
        position: relative; 
        transition: 120ms transform cubic-bezier(0.3, 0.5, 0.6, 2.4); 
        text-decoration: none; 
        font-weight: bold; 
    }
    
    .inidac-nav-1st.mobile-open .inidac-nav-1st-link::after { 
        content: ''; 
        position: absolute; 
        top: 0; 
        left: 0; 
        width: 100%; 
        height: 100%; 
        background: center center / auto no-repeat; 
        transform: skewX(20deg); 
        background-size: auto 18%; 
        z-index: -1; 
        border-radius: 10px; 
    }
    
    /* 移动端禁用导航链接 hover 效果 */
    .inidac-nav-1st-link:hover { 
        background: #222; 
        box-shadow: none; 
        transform: skewX(-20deg); 
        color: #fff; 
    }
    
    .inidac-nav-1st-link:hover::after { 
        transform: skewX(20deg); 
        filter: none; 
    }
    
    /* 移动端导航链接 active 效果（使用原来的 hover 效果） */
    .inidac-nav-1st-link:active { 
        background: linear-gradient(to bottom, #fff, #f4f4f4); 
        box-shadow: 0 0 1rem -0.5rem #000; 
        transform: translate(-2px, 4px) skewX(-20deg); 
        color: #000; 
    }
    
    .inidac-nav-1st-link:active::after { 
        transform: skewX(20deg); 
        filter: brightness(2%); 
    }
    
    /* 移动端显示第一个菜单项（logo） */
    .inidac-nav-1st-item:first-child { 
        display: none; 
    }
    
    .inidac-nav-1st.mobile-open .inidac-nav-1st-item:first-child { 
        display: flex; 
        justify-content: center; 
        align-items: center; 
    }
    
    .inidac-nav-1st.mobile-open .inidac-nav-1st-item:first-child img { 
        height: 80px; 
        width: auto; 
        object-fit: contain; 
        transition: transform 0.3s ease; 
    }
    
    /* 移动端禁用第一个菜单项 hover 效果 */
    .inidac-nav-1st.mobile-open .inidac-nav-1st-item:first-child:hover img { 
        transform: none; 
    }
    
    /* 移动端禁用 scrolled 状态下的导航链接 hover 效果 */
    .inidac-nav-1st.scrolled .inidac-nav-1st-link:hover { 
        background: #222; 
        box-shadow: none; 
        transform: skewX(-20deg); 
        color: #fff; 
    }
    
    /* 移动端 scrolled 状态下导航链接 active 效果 */
    .inidac-nav-1st.scrolled .inidac-nav-1st-link:active { 
        background: linear-gradient(to bottom, #fff, #f4f4f4); 
        box-shadow: 0 0 1rem -0.5rem #000; 
        transform: translate(-2px, 4px) skewX(-20deg); 
        color: #000; 
        height: 55px; 
        margin-top: -5px; 
    }
    
    .inidac-nav-1st.scrolled .inidac-nav-1st-link:active::after { 
        transform: skewX(20deg); 
        filter: brightness(2%); 
    }
    
    /* 移动端禁用二级导航 hover 效果 */
    .inidac-nav-2nd-item:hover { 
        left: 0 !important; 
        color: #111 !important; 
        transform: none !important; 
    } 
    .inidac-nav-2nd-item:hover::before { 
        background-color: #f2f2f2 !important; 
    }
    
    /* 移动端禁用导航链接 hover 效果 */
    .inidac-nav-link:hover::before { 
        background-color: #f2f2f2; 
        box-shadow: inset 0 0 0 2px #f2f2f2, inset 0 0 0 4px #111; 
    }
    .inidac-nav-link:hover > .inidac-nav-link--text { 
        color: #111; 
    }
    .inidac-nav-link:hover > .inidac-nav-link--text::before { 
        left: -1rem; 
    }
    
    /* 小屏幕进一步调整 */
    @media screen and (max-width: 480px) {
        .inidac-nav-1st.mobile-open .inidac-nav-1st-menu { 
            gap: 0.8rem; 
            padding: 0.8rem; 
        } 
        .inidac-nav-1st.mobile-open .inidac-nav-1st-item { 
            max-width: 250px; 
        } 
        .inidac-nav-1st.mobile-open .inidac-nav-1st-link { 
            font-size: 1rem; 
            padding: 0.8rem 1.2rem; 
            max-width: 250px; 
            border-radius: 6px; 
        } 
    }
    
    @media screen and (max-width: 360px) {
        .inidac-nav-1st.mobile-open .inidac-nav-1st-menu { 
            gap: 0.6rem; 
            padding: 0.6rem; 
        } 
        .inidac-nav-1st.mobile-open .inidac-nav-1st-item { 
            max-width: 220px; 
        } 
        .inidac-nav-1st.mobile-open .inidac-nav-1st-link { 
            font-size: 0.9rem; 
            padding: 0.6rem 1rem; 
            max-width: 220px; 
            border-radius: 5px; 
        } 
    }
}

/* --- 二级导航菜单样式（通用，用于 news/guide/rank/profile 页面） --- */
/* 二级导航菜单容器（桌面端：固定定位，移动端：流式布局） */
#inidac-nav-2nd {
    position: fixed;
    left: -20px;
    top: 200px;
    width: 300px;
}

/* 移动端：改为流式布局 */
@media screen and (max-width: 1780px) {
    #inidac-nav-2nd {
        width: 100%;
        position: static;
    }
}

/* 二级导航按钮容器（桌面端：固定定位，移动端：流式布局） */
.inidac-nav-2nd-btn { 
    position: sticky; 
    top: 100px; 
}

/* 移动端：改为流式布局 */
@media screen and (max-width: 1780px) { 
  .inidac-nav-2nd-btn { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    gap: clamp(0.5rem, 1.5vw, 1rem); 
    position: static; 
    margin: 0 auto; 
    width: 100%; 
    box-sizing: border-box; 
  } 
}

/* 单个导航按钮容器 */
.inidac-nav-2nd-list { 
    height: 4.5rem; 
    margin-bottom: 0.25rem; 
}

/* 移动端：列表项自适应布局 */
@media screen and (max-width: 1780px) { 
  .inidac-nav-2nd-list { 
    flex: 1 1 25%; 
    min-width: 0; 
    max-width: calc(50% - clamp(0.5rem, 1.5vw, 1rem) / 2); 
    height: auto; 
    box-sizing: border-box; 
    margin: 0; 
  } 
}

/* 小屏幕：列表项占 50% 宽度 */
@media screen and (max-width: 768px) { 
  .inidac-nav-2nd-list { 
    flex: 1 1 calc(50% - clamp(0.5rem, 1.5vw, 1rem) / 2); 
    max-width: calc(50% - clamp(0.5rem, 1.5vw, 1rem) / 2); 
  } 
}

/* 导航按钮链接基础样式（桌面端：左侧滑入动画） */
.inidac-nav-2nd-item { 
    font-feature-settings: "palt"; 
    position: relative; 
    left: -1rem; 
    display: block; 
    width: 21rem; 
    height: 4rem; 
    color: #000; 
    transition: left 100ms, transform 0.8s ease; 
    opacity: 0; 
    transform: translateX(-150px) scale(0.8) rotate(-5deg); 
    text-decoration: none !important; 
}

/* 滑入动画类 */
.inidac-nav-2nd-item.animate-slide-in { 
    animation: slideInFromLeft 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards; 
}

/* 从下方滑入动画类 */
.inidac-nav-2nd-item.animate-slide-up { 
    animation: slideInFromBottom 0.6s ease-out forwards; 
}

/* 移动端：导航按钮样式 */
@media screen and (max-width: 1780px) { 
  .inidac-nav-2nd-item { 
    width: 100%; 
    left: 0; 
    height: clamp(2.5rem, 4vw, 3.1rem); 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    background: center center / 100% 100% no-repeat; 
    background-image: url('/images/localnav_sp_bg.png'); 
    color: #111; 
    font-weight: bold; 
    letter-spacing: normal; 
    font-size: clamp(16px, 2vw, 24px); 
    opacity: 0; 
    transform: translateY(50px); 
  } 
    .inidac-nav-2nd-item::before { 
        display: none !important; 
    } 
}

/* 桌面端：悬停效果 */
.inidac-nav-2nd-item:hover { 
    left: -0.75rem; 
    color: #f2f2f2; 
    cursor: pointer; 
    text-decoration: none !important; 
}

/* 桌面端：点击效果 */
.inidac-nav-2nd-item:active { 
    transform: translateX(0) scale(0.95) rotate(0deg) !important; 
    transition: transform 0.1s ease !important; 
}

/* 移动端：悬停和点击效果 */
@media screen and (max-width: 1780px) { 
  .inidac-nav-2nd-item { 
    text-decoration: none !important; 
    transition: transform 0.2s ease !important; 
  } 
  .inidac-nav-2nd-item:hover { 
    left: 0 !important; 
    color: #111 !important; 
    transform: none !important; 
  } 
  .inidac-nav-2nd-item:hover::before { 
    background-color: #f2f2f2 !important; 
  } 
  .inidac-nav-2nd-item:active { 
    transform: scale(0.9) !important; 
    transition: transform 0.1s ease !important; 
  } 
}

/* 导航按钮背景层（桌面端：倾斜效果） */
.inidac-nav-2nd-item::before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    display: block; 
    width: 100%; 
    height: 100%; 
    box-shadow: 0.5rem 0.5rem 0 0 #111; 
    z-index: 0; 
    background-color: #f2f2f2; 
    transform: skewX(-20deg); 
    transform-origin: 100% 0; 
}

.inidac-nav-2nd-item:hover::before { 
    background-color: #d7a715; 
}

/* 导航按钮边框装饰（桌面端：右侧边框图片） */
.inidac-nav-2nd-item::after { 
    content: ""; 
    position: absolute; 
    top: -0.125rem; 
    left: -0.125rem; 
    display: block; 
    z-index: 10; 
    width: calc(100% + 0.25rem); 
    height: calc(100% + 0.25rem); 
    z-index: 0; 
    background-color: #f2f2f2; 
    transform-origin: 100% 0; 
    background: right center / auto 100% no-repeat; 
    background-image: url('/images/localnav_guide_border.png'); 
}

/* 移动端：隐藏边框装饰 */
@media screen and (max-width: 1780px) { 
    .inidac-nav-2nd-item::after { 
        display: none !important; 
        content: none; 
        background-image: none; 
    } 
}

/* 导航按钮文字样式（桌面端：右对齐） */
.inidac-nav-2nd-item > span { 
    position: relative; 
    display: flex; 
    justify-content: flex-end; 
    align-items: center; 
    width: 100%; 
    height: 100%; 
    padding-right: 3rem; 
    font-size: 1.7rem; 
    font-weight: bold; 
    text-shadow: 1px 0 0 1px; 
    letter-spacing: -0.125rem; 
    transform: none; 
}

/* 移动端：文字居中 */
@media screen and (max-width: 1780px) { 
  .inidac-nav-2nd-item > span { 
    position: relative; 
    justify-content: center; 
    padding-right: 0; 
    transform: none; 
    font-size: clamp(16px, 2vw, 1.7rem); 
    letter-spacing: normal; 
  } 
}

/* ============================================================
   第四部分：通用组件样式
   ============================================================ */

/* --- 页脚样式 --- */
/* 网站页脚容器 */
.inidac-site-footer { 
    font-feature-settings: "palt"; 
    color: #fff; 
    position: relative; 
    width: 100%; 
    background: url('/images/footer_bg@pc.jpg.webp') center center/cover no-repeat; 
    margin-top: 0; 
}

/* 页脚内容容器 */
.inidac-site-footer-inner { 
    margin: 0px auto; 
    text-align: center; 
}

.inidac-site-footer-inner p { 
    margin: 0; 
    font-size: 1rem; 
    line-height: 1.6; 
}

/* 页脚响应式样式 */
@media screen and (min-width: 1389px) { 
    .inidac-site-footer { 
        font-size: 12px; 
    } 
    .inidac-site-footer-inner { 
        width: 1000px; 
        padding: 50px 0px; 
    } 
}

@media screen and (max-width: 1388px) { 
    .inidac-site-footer { 
        font-size: 16px; 
    } 
    .inidac-site-footer-inner { 
        width: 100%; 
        padding: 50px 0px; 
    } 
    .inidac-site-footer-inner p { 
        width: 340px; 
        margin: 0 auto; 
    } 
}

/* --- 通用按钮组件 --- */

/* 按钮颜色 - 直接使用第二部分定义的通用颜色类 */
/* 用法示例：
   - 小按钮：class="btn btn-sm bg-white color-black"
   - 中等按钮（默认）：class="btn bg-orange color-white"
   - 大按钮：class="btn btn-lg bg-green color-white"
   - 轮廓按钮：class="btn bg-transparent border-red color-red"
   
   所有颜色类都在第二部分定义，包括：
   - color-* (文字颜色)
   - bg-* (背景颜色)
   - border-* (边框颜色)
   - bg-*-hover (hover 背景颜色)
   - bg-*-active (active 背景颜色)
   
*/

/* 基础按钮样式 */
.btn {
    padding: 0.5rem 1.5rem;
    border: 2px solid #111;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: bold;
    transition: all 0.2s;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    line-height: 1.5;
    transition: transform 0.3s ease;
}

.btn:active {
    transform: scale(0.95);
    transition: transform 0.1s ease;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* 按钮大小变体 */
/* 小按钮 */
.btn-sm {
    padding: 6px 12px;
    font-size: 0.9rem;
}

/* 大按钮 */
.btn-lg {
    padding: 0.8rem 2rem;
    font-size: 1rem;
}

/* 无弧度按钮（方形按钮） */
.btn-square {
    border-radius: 0;
}

/* --- 语言切换按钮 --- */
/* 语言切换按钮（通用） */
.locale-switch-btn { 
    display: none; 
    position: fixed; 
    top: 1rem; 
    right: 4.5rem; 
    z-index: 1001; 
    background: #222; 
    border: 2px solid #555; 
    border-radius: 5px; 
    padding: 0.844rem; 
    cursor: pointer; 
    transition: all 0.3s ease; 
    color: #fff; 
    font-size: 14px; 
    font-weight: 500; 
    font-family: 'Noto Sans JP', sans-serif; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    box-sizing: border-box; 
    line-height: 1; 
}

.locale-switch-btn:hover { 
    background: #333; 
    border-color: #ff6b35; 
}

/* 语言切换按钮响应式 */
@media screen and (max-width: 768px) { 
    .locale-switch-btn { 
        display: inline-flex; 
        position: fixed; 
        top: 1rem; 
        right: 4.5rem; 
        z-index: 1003; 
    } 
}

@media screen and (min-width: 769px) { 
    .locale-switch-btn { 
        display: inline-flex; 
        top: 38.5px; 
        right: 1rem; 
        z-index: 601; 
        align-items: center; 
        justify-content: center; 
        transform: translateY(-50%); 
        transition: top 0.3s ease, padding 0.3s ease, font-size 0.3s ease; 
    } 
    .locale-switch-btn.scrolled { 
        top: 25px; 
        padding: 0.5rem; 
        font-size: 12px; 
    } 
}

/* --- 返回顶部按钮 --- */
/* 返回顶部按钮（通用） */
.inidac-goto-top { 
    position: fixed; 
    z-index: 9999; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    right: 50px; 
    bottom: 50px; 
    width: 80px; 
    height: 80px; 
    transition: all 0.8s ease; 
    border: none; 
    cursor: pointer; 
    background: #f5f5f5; 
    border-radius: 0; 
    font-size: 0px; 
    transform: scale(0.85); 
    opacity: 0; 
    pointer-events: none; 
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); 
}

/* 返回顶部按钮箭头图标 */
.inidac-goto-top::before { 
    content: ''; 
    width: 0; 
    height: 0; 
    border-left: 16px solid transparent; 
    border-right: 16px solid transparent; 
    border-bottom: 24px solid #4a4a4a; 
    margin-bottom: 8px; 
}

/* 返回顶部按钮文字 */
.inidac-goto-top::after { 
    content: 'PAGE TOP'; 
    font-size: 10px; 
    font-weight: 500; 
    font-family: 'Noto Sans JP', sans-serif; 
    color: #4a4a4a; 
    letter-spacing: 0.5px; 
    text-align: center; 
    line-height: 1.2; 
}

/* 返回顶部按钮显示状态 */
.inidac-goto-top.show { 
    transform: scale(1); 
    opacity: 0.8; 
    pointer-events: auto; 
}

.inidac-goto-top.show:active { 
    transform: scale(0.9); 
    transition: transform 0.1s ease; 
}

/* 返回顶部按钮响应式 */
@media screen and (max-width: 1388px) { 
    .inidac-goto-top { 
        right: 20px; 
        bottom: 20px; 
        width: 60px; 
        height: 60px; 
    } 
    .inidac-goto-top::before { 
        border-left-width: 12px; 
        border-right-width: 12px; 
        border-bottom-width: 18px; 
        margin-bottom: 6px; 
    } 
    .inidac-goto-top::after { 
        font-size: 8px; 
    } 
}

/* --- 通用内容切换动画样式（用于所有页面的内容切换） --- */
/* 统一的内容切换容器（排行榜、新闻、文章、内容区块、表单等） */
#ranking-content, 
.ranking-list, 
#news-list, 
#article-content, 
.content-section, 
.inidac-form {
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    opacity: 1;
    transform: translateY(0);
}

/* 内容切换时的淡出状态 */
#ranking-content.is-switching, 
.ranking-list.is-switching, 
#news-list.is-switching, 
#article-content.is-switching, 
.content-section.is-switching, 
.inidac-form.is-switching {
    opacity: 0 !important;
    transform: translateY(20px) !important;
    transition: all 0.3s ease-out !important;
}

/* 内容切换后的淡入状态 */
#ranking-content.is-entering, 
.ranking-list.is-entering, 
#news-list.is-entering, 
#article-content.is-entering, 
.content-section.is-entering, 
.inidac-form.is-entering {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: all 0.3s ease-out !important;
}

/* 确保在添加动画类之前元素处于正常显示状态 */
#ranking-content:not(.is-entering):not(.is-switching),
.ranking-list:not(.is-entering):not(.is-switching),
#news-list:not(.is-entering):not(.is-switching),
#article-content:not(.is-entering):not(.is-switching),
.content-section:not(.is-entering):not(.is-switching),
.inidac-form:not(.is-entering):not(.is-switching) {
    opacity: 1;
    transform: translateY(0);
}

/* --- 数据表格组件（通用） --- */
/* 表格容器（支持横向滚动） */
.table-container {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}

/* 数据表格基础样式 */
.data-table {
    width: auto;
    min-width: 100%;
    border-collapse: collapse;
    background: #fff;
    table-layout: auto;
    box-sizing: border-box;
}

/* 桌面端：表格根据内容自动调整宽度 */
@media screen and (min-width: 1389px) {
    .data-table {
        width: auto;
        min-width: 100%;
        table-layout: auto;
    }
    
    /* 表格单元格内容不换行，允许横向滚动 */
    .data-table th,
    .data-table td {
        word-wrap: break-word;
        word-break: break-word;
        overflow-wrap: break-word;
        white-space: nowrap;
        line-height: 1.4;
    }
}

/* 表格头部 */
.data-table thead {
    background: #222;
    color: #fff;
}

/* 表格单元格基础样式 */
.data-table th,
.data-table td {
    padding: 0.8rem;
    text-align: left;
    border: 1px solid #ddd;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    overflow: visible;
    box-sizing: border-box;
    white-space: nowrap;
    line-height: 1.4;
}

/* 表格头部单元格 */
.data-table th {
    font-weight: bold;
    color: #fff;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
    overflow: visible;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    line-height: 1.4;
}

/* 移动端：确保表头第一列（序号）居中 */
@media screen and (max-width: 768px) {
    .data-table thead th:first-child {
        text-align: center !important;
    }
}

/* 表格数据单元格 */
.data-table td {
    color: #111;
    text-align: center;
    vertical-align: middle;
    white-space: normal;
    overflow-wrap: break-word;
    hyphens: auto;
    overflow: hidden;
}

/* 表格行样式 */
.data-table tbody tr:nth-child(even) {
    background: #f5f5f5;
}

.data-table tbody tr:hover {
    background: #e8e8e8;
}

/* 机器列表表格行样式（禁用斑马纹和悬停效果） */
.machines-list .data-table tbody tr {
    background: #fff !important;
}

.machines-list .data-table tbody tr:hover {
    background: #fff !important;
}

/* --- 移动端响应式表格样式（卡片式布局） --- */
/* 移动端：使用 data-label 实现卡片式布局 */
@media screen and (max-width: 1388px) {
    .data-table {
        border: 0;
    }
    
    .data-table thead {
        display: none;
    }
    
    .data-table tbody {
        display: block;
        width: 100%;
    }
    
    .data-table tbody tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid #ddd;
        border-radius: 4px;
        background: #fff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    .data-table tbody tr:nth-child(even) {
        background: #fff;
    }
    
    /* 移动端禁用表格行 hover 效果 */
    .data-table tbody tr:hover {
        background: #fff;
    }
    /* 移动端表格行 active 效果 */
    .data-table tbody tr:active {
        background: #e8e8e8;
    }
    
    .data-table tbody td {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
        width: 100%;
        min-height: 3rem;
        padding: 0.75rem;
        text-align: right;
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
        box-sizing: border-box;
        overflow: hidden;
        white-space: normal;
    }
    
    .data-table tbody td:last-child {
        border-bottom: none;
    }
    
    /* 使用伪元素显示列标签 */
    .data-table tbody td:before {
        content: attr(data-label);
        position: absolute;
        left: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        font-weight: bold;
        text-align: left;
        color: #222;
    }
    
    /* 第一列作为卡片标题 */
    .data-table tbody td:first-child {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #222;
        color: #fff;
        font-weight: bold;
        border-radius: 4px 4px 0 0;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        text-align: center;
        min-height: 3rem;
    }
    
    .data-table tbody td:first-child:before {
        display: none;
    }
}

/* --- 数据卡片组件（通用） --- */
/* 数据卡片容器 */
.data-card {
    width: 100%;
    margin: 2rem auto;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.95);
    border: 3px solid #111;
    box-shadow: 0.5rem 0.5rem 0 0 #111;
    box-sizing: border-box;
}

/* 卡片区块 */
.card-section {
    margin-bottom: 2rem;
}

.card-section:last-child {
    margin-bottom: 0;
}

/* 卡片区块标题栏 */
.card-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #ff6b35;
}

/* 卡片区块标题 */
.card-section-title {
    color: #111;
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0;
    padding: 0;
    border: none;
}

/* 数据卡片响应式样式 */
@media screen and (max-width: 1387px) {
    .data-card {
        width: 100%;
        padding: 1.5rem;
        margin: 1rem 0;
    }
}

/* --- 分页控件组件（通用） --- */
/* 分页控件容器 */
.PageControls { 
    display: flex; 
    justify-content: space-between; 
    margin: 2rem 0; 
}

@media screen and (min-width: 1200px) { 
    .PageControls { 
        width: 1000px; 
        margin: 2rem auto; 
    } 
}

@media screen and (max-width: 1200px) { 
    .PageControls { 
        justify-content: space-between; 
    } 
}

/* 分页按钮组 */
.PageControls-buttons { 
    display: flex; 
    justify-content: center; 
}

@media screen and (min-width: 1200px) { 
    .PageControls-buttons { 
        width: 300px; 
    } 
}

@media screen and (max-width: 1200px) { 
    .PageControls-buttons { 
        width: 90px; 
    } 
}

/* 分页按钮 */
@media screen and (min-width: 1200px) { 
    .PageControls--button { 
        flex: 0 0 6rem; 
        margin: 0 0.5rem; 
    } 
}

@media screen and (max-width: 1200px) { 
    .PageControls--button { 
        margin: 0 0.2rem; 
    } 
}

.PageControls--button .uiButton--text { 
    font-size: 20px; 
    line-height: 1; 
}

/* --- UI 按钮组件（通用） --- */
/* 通用按钮样式 */
.uiButton { 
    width: 100%; 
    min-width: 2rem; 
    min-height: 2rem; 
    padding: .2rem 0.5rem; 
    border: 1px solid #111; 
    border-radius: 0.25rem; 
    background-color: #f2f2f2; 
    font-size: 0.9rem; 
    line-height: 1; 
    vertical-align: middle; 
    cursor: default; 
    color: #111; 
    display: flex; 
    justify-content: center; 
    box-sizing: border-box; 
    text-decoration: none; 
}

.uiButton, 
.uiButton:not(:disabled):hover { 
    box-shadow: inset 0 .25rem .25rem -.25rem #fff, inset 0 -.25rem .25rem -.25rem #000; 
}

.uiButton:not(:disabled):active { 
    box-shadow: inset 0 .125rem .125rem -.125rem #000, inset 0 -.125rem .125rem -.125rem #fff; 
}

.uiButton:not(:disabled):not(.active):hover { 
    background-color: #e8e8e8; 
}

/* --- UI 选择器组件（通用） --- */
/* 自定义下拉选择器容器 */
.uiSelect { 
    box-shadow: inset 0 0 0 1px #111, inset 0 0 0 3px #f2f2f2, inset 0 .5rem .5rem -.5rem #fff, inset 0 -.5rem .5rem -.5rem #fff; 
    position: relative; 
    display: inline-block; 
    height: 2rem; 
    width: 120px; 
    background-color: #111; 
    color: #f2f2f2; 
    vertical-align: middle; 
    box-sizing: border-box; 
}

/* 选择器显示文本 */
.uiSelect--text { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    padding: 0 0.5rem; 
    padding-right: 2.5rem; 
    pointer-events: none; 
    -webkit-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 0.9rem; 
    line-height: 1; 
    color: #f2f2f2; 
    box-sizing: border-box; 
    white-space: nowrap; 
    overflow: hidden; 
}

/* 选择器下拉按钮 */
.uiSelect--button { 
    position: absolute; 
    top: 2px; 
    right: 2px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: calc(2rem - 4px); 
    height: calc(2rem - 4px); 
    padding: 0; 
    border: 0; 
    border-radius: 0; 
    background-color: #f2f2f2; 
    color: #111; 
    font-size: 0.8rem; 
    box-shadow: none; 
    pointer-events: none; 
    box-sizing: border-box; 
}

.uiSelect:focus, 
.uiSelect:hover { 
    filter: brightness(110%); 
}

/* 选择器实际 select 元素（透明覆盖） */
.uiSelect--select { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    padding: 0; 
    margin: 0; 
    border: 0; 
    background-color: transparent; 
    color: #111; 
    opacity: 0; 
    cursor: pointer; 
    font-size: 0.9rem; 
    box-sizing: border-box; 
    z-index: 1; 
}

.uiSelect--select option { 
    background-color: #fff; 
    color: #111; 
    padding: 0.5rem; 
}

/* --- 链接按钮组件（通用） --- */
/* 链接按钮容器 */
.link-btn {
    position: relative;
    display: block;
    height: 3rem;
    min-width: 7rem;
    width: 150px;
    margin: 0 auto;
    cursor: pointer;
    transition: transform 0.5s ease;
}

.link-btn:active {
    transform: translate(0.2rem, 0.2rem);
    transition: transform 0.1s ease;
}

.link-btn::before,
.link-btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -2rem;
    bottom: 0;
    display: block;
    width: calc(100% + 4rem);
    height: 100%;
    background: center center / contain no-repeat;
}

.link-btn::before {
    background-color: #f2f2f2;
    box-shadow: inset 0 0 0 2px #f2f2f2, inset 0 0 0 4px #111;
}

.link-btn:hover::before {
    background: linear-gradient(to bottom, #111 35%, #666 48%, #666 52%, #111 58%);
    box-shadow: inset 0 0 0 2px #f2f2f2, inset 0 0 0 4px #111;
}

.link-btn::after {
    box-shadow: 0.5rem 0.5rem 0 0 #111;
    transition: box-shadow 0.1s ease;
}

.link-btn:active::after {
    box-shadow: 0.3rem 0.3rem 0 0 #111;
}

/* 链接按钮文本 */
.link-btn-text {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: 1.2rem;
    font-weight: bold;
    color: #111;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
}

.link-btn:hover .link-btn-text {
    color: #f2f2f2;
}

/* 表单按钮容器 */
.form-actions {
    display: flex;
    gap: 1.5rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* link-btn 并排专用样式 */
.link-btn-inline {
    display: inline-block;
    height: 3rem;
    min-width: 7rem;
    width: auto;
    margin: 0;
    flex: 0 0 auto;
    position: relative;
}

.link-btn-inline::before,
.link-btn-inline::after {
    left: 0;
    width: 100%;
}

.link-btn-inline .link-btn-text {
    font-size: 1.2rem;
    padding: 0 1.5rem;
    white-space: nowrap;
}

/* 响应式调整 - 移动端 */
@media screen and (max-width: 1388px) {
    .form-actions {
        gap: 1rem;
    }
    
    .link-btn-inline {
        height: 2.5rem;
        min-width: 5rem;
    }
    
    .link-btn-inline .link-btn-text {
        font-size: 1rem;
        padding: 0 1.2rem;
    }
}

/* --- 标题组件（通用） --- */
/* 一级标题样式 */
.inidac-heading-lv1 { 
    text-shadow: 0 -1px 2px #111, 0 -1px 2px #111, 0 -1px 2px #111, 0 -1px 2px #111, -1px 1px 1px #111, 0px 1px 1px #111, 1px 1px 1px #111, 0px 2px 1px #111, 1px 2px 1px #111, 2px 2px 1px #111, 1px 3px 1px #111, 2px 3px 1px #111, 3px 3px 1px #111, 2px 4px 1px #111, 3px 4px 1px #111, 4px 4px 1px #111, 3px 5px 1px #111, 4px 5px 1px #111, 5px 5px 1px #111, 4px 6px 1px #111, 5px 6px 1px #111, 6px 6px 1px #111; 
    font-feature-settings: "palt"; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    color: #fff; 
    font-weight: bold; 
    margin: 40px auto; 
    padding: 10px; 
    background: url('/images/heading-level1.png.webp') center center / contain no-repeat; 
}

.inidac-heading-lv1 div { 
    font-size: 42px; 
}

@media screen and (max-width: 1780px) { 
    .inidac-heading-lv1 div { 
        font-size: 28px; 
    } 
}

/* 二级标题样式 */
.inidac-heading-lv2 { 
    text-shadow: 0 -1px 2px #111, 0 -1px 2px #111, 0 -1px 2px #111, 0 -1px 2px #111, -1px 1px 1px #111, 0px 1px 1px #111, 1px 1px 1px #111, 0px 2px 1px #111, 1px 2px 1px #111, 2px 2px 1px #111, 1px 3px 1px #111, 2px 3px 1px #111, 3px 3px 1px #111, 2px 4px 1px #111, 3px 4px 1px #111, 4px 4px 1px #111, 3px 5px 1px #111, 4px 5px 1px #111, 5px 5px 1px #111, 4px 6px 1px #111, 5px 6px 1px #111, 6px 6px 1px #111; 
    font-feature-settings: "palt"; 
    position: relative; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    flex-direction: column; 
    width: 100%; 
    height: 4rem; 
    color: #fff; 
    font-weight: bold; 
    transform: skewX(-10deg); 
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 3px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); 
}

@media screen and (min-width: 1389px) { 
    .inidac-heading-lv2 { 
        margin: 3rem auto; 
        font-size: 2rem; 
        max-width: 1000px; 
    } 
}

@media screen and (max-width: 1388px) { 
    .inidac-heading-lv2 { 
        margin: 1rem auto; 
        font-size: 1.5rem; 
    } 
}

/* 二级标题背景装饰 */
.inidac-heading-lv2::before { 
    content: ''; 
    position: absolute; 
    top: -50%; 
    z-index: -1; 
    display: block; 
    width: 100%; 
    height: 200%; 
    background: linear-gradient(45deg, #ff6b35, #ff8c42) center center/auto 100% no-repeat; 
    background-image: url('/images/heading-level2.png.webp'); 
    background-size: auto 100%; 
    border-radius: 10px; 
}

@media screen and (max-width: 1388px) { 
    .inidac-heading-lv2::before { 
        background: linear-gradient(45deg, #ff6b35, #ff8c42) center center/auto 90% no-repeat; 
        background-image: url('/images/heading-level2.png.webp'); 
        background-size: auto 90%; 
    } 
}

/* 二级标题副标题 */
.inidac-heading-sub { 
    line-height: 1.1; 
    color: #ff6b35; 
    font-weight: bold; 
}

@media screen and (min-width: 1389px) { 
    .inidac-heading-sub { 
        font-size: 1.25rem; 
    } 
}

@media screen and (max-width: 1388px) { 
    .inidac-heading-sub { 
        font-size: 1rem; 
    } 
}

/* 三级标题样式 */
.inidac-heading-lv3 { 
    text-shadow: -2px -2px 1px #fff, -1px -2px 1px #fff, 0px -2px 1px #fff, 1px -2px 1px #fff, 2px -2px 1px #fff, -2px -1px 2px #fff, -1px -1px 2px #fff, 0px -1px 2px #fff, 1px -1px 2px #fff, 2px -1px 2px #fff, -2px 1px 2px #fff, -1px 1px 2px #fff, 0px 1px 2px #fff, 1px 1px 2px #fff, 2px 2px 1px #fff; 
    font-feature-settings: 'palt'; 
    display: flex; 
    align-items: center;
    justify-content: center;
    margin: 0 0; 
    color: #b4431a; 
    font-weight: bold;
    width: auto;
    height: clamp(3rem, 6vw, 6rem); 
    font-size: clamp(1.3rem, 2vw, 1.8rem); 
    font-style: normal;
    margin-bottom: clamp(0.625rem, 1vw, 10px); 
    background: url('/images/heading-level3.png.webp') center center/contain no-repeat;
}

.inidac-heading-lv3 > div { 
    transform: skewX(-10deg); 
}

/* --- Badge 组件样式（全局公共组件） --- */
/* Badge 基础样式 */
.badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.badge-success-light {
    background-color: #d4edda;
    color: #155724;
}

.badge-danger-light {
    background-color: #f8d7da;
    color: #721c24;
}

.badge-info {
    background-color: #d1ecf1;
    color: #0c5460;
}

.badge-info-light {
    background-color: #d1ecf1;
    color: #0c5460;
}

.badge-warning-light {
    background-color: #fff3cd;
    color: #856404;
}

.badge-dark {
    background-color: #343a40;
    color: white;
}

.badge-secondary {
    background-color: #6c757d;
    color: white;
}

/* --- 操作下拉菜单组件样式（全局公共组件） --- */
/* 数据表格行定位 */
.data-table tbody tr {
    position: relative;
}

.data-table tbody tr.dropdown-active {
    z-index: 1000;
}

.operation-cell {
    position: relative;
    overflow: visible !important;
}

.operation-dropdown {
    position: relative;
    display: inline-block;
}

.arrow-icon {
    display: inline-block;
}

/* 桌面端：显示向左三角 */
@media screen and (min-width: 1389px) {
    .arrow-icon::before {
        content: '◀';
    }
}

/* 移动端：显示向上三角 */
@media screen and (max-width: 1388px) {
    .arrow-icon::before {
        content: '▲';
    }
}

.dropdown-menu {
    display: none;
    position: absolute;
    background: #fff;
    border: 2px solid #111;
    border-radius: 4px;
    min-width: 120px;
    z-index: 10001;
    overflow: hidden;
}

/* 桌面端：按钮左侧向上弹出，与按钮底部对齐 */
@media screen and (min-width: 1389px) {
    .dropdown-menu {
        right: 100%;
        bottom: 0;
        margin-right: 4px;
        box-shadow: -0.5rem -0.5rem 0 0 #111;
    }
}

/* 移动端：右对齐，向上展开 */
@media screen and (max-width: 1388px) {
    .dropdown-menu {
        right: 0;
        bottom: 100%;
        margin-bottom: 4px;
        box-shadow: -0.5rem -0.5rem 0 0 #111;
    }
}

.dropdown-menu.show {
    display: block;
}

.dropdown-menu a {
    display: block;
    padding: 10px 16px;
    color: #111;
    text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.2s;
    border-bottom: 1px solid #eee;
}

.dropdown-menu a:last-child {
    border-bottom: none;
}

.dropdown-menu a:hover {
    background: #f8f9fa;
}

.dropdown-menu a:active {
    background: #e9ecef;
}

/* ============================================================
   第五部分：动画和装饰元素（通用）
   ============================================================ */

/* --- 关键帧动画定义 --- */
/* 从下方滑入动画 */
@keyframes slideInUp { 
    from { 
        opacity: 0; 
        transform: translateY(30px); 
    } 
    to { 
        opacity: 1; 
        transform: translateY(0); 
    } 
}

/* 从左侧滑入动画（带旋转和缩放效果，用于侧边导航按钮） */
@keyframes slideInFromLeft { 
    0% { 
        opacity: 0; 
        transform: translateX(-150px) scale(0.8) rotate(-5deg); 
    } 
    30% { 
        opacity: 0.7; 
        transform: translateX(30px) scale(1.1) rotate(2deg); 
    } 
    60% { 
        opacity: 1; 
        transform: translateX(-10px) scale(0.95) rotate(-1deg); 
    } 
    100% { 
        opacity: 1; 
        transform: translateX(0) scale(1) rotate(0deg); 
    } 
}

/* 从下方滑入动画（用于按钮） */
@keyframes slideInFromBottom { 
    0% { 
        opacity: 0; 
        transform: translateY(50px); 
    } 
    50% { 
        opacity: 1; 
        transform: translateY(-10px); 
    } 
    100% { 
        opacity: 1; 
        transform: translateY(0); 
    } 
}

/* 淡入向上动画 */
@keyframes fadeInUp { 
    from { 
        opacity: 0; 
        transform: translateY(20px); 
    } 
    to { 
        opacity: 1; 
        transform: translateY(0); 
    } 
}

/* --- 装饰元素：文字动画容器 --- */
/* 文字装饰元素容器（背景装饰） */
.moji-container { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: -1; 
    pointer-events: none; 
}

/* 单个文字装饰元素 */
.moji-element { 
    position: absolute; 
    width: 80px; 
    height: 80px; 
    pointer-events: none; 
}

.moji-element img { 
    width: 100%; 
    height: 100%; 
    object-fit: contain; 
    animation: moji-shake 400ms steps(1) infinite both; 
}

/* 文字抖动动画 */
@keyframes moji-shake { 
    0% { transform: translate(-3.8952px, -1.52892px) rotate(-.41575deg) scale(.98894); } 
    10% { transform: translate(2.1234px, 1.2345px) rotate(.2345deg) scale(1.0123); } 
    20% { transform: translate(-1.5678px, 2.3456px) rotate(-.3456deg) scale(.9876); } 
    30% { transform: translate(1.2345px, -1.5678px) rotate(.4567deg) scale(1.0234); } 
    40% { transform: translate(-2.3456px, .7890px) rotate(-.5678deg) scale(.9765); } 
    50% { transform: translate(.5678px, 2.1234px) rotate(.6789deg) scale(1.0345); } 
    60% { transform: translate(1.7890px, -2.3456px) rotate(-.7890deg) scale(.9654); } 
    70% { transform: translate(-.3456px, 1.5678px) rotate(.8901deg) scale(1.0456); } 
    80% { transform: translate(2.5678px, -.1234px) rotate(-.9012deg) scale(.9543); } 
    90% { transform: translate(1.65679px, -.00874px) rotate(.52176deg) scale(1.01695); } 
    100% { transform: translate(.28777px, .63664px) rotate(-.22677deg) scale(1.00534); } 
}

/* 文字装饰元素位置（桌面端） */
.moji-1 { top: 20%; left: 20%; } 
.moji-2 { top: 28%; left: 18%; } 
.moji-3 { top: 36%; left: 22%; } 
.moji-4 { top: 44%; left: 20%; } 
.moji-5 { top: 84%; right: 28%; } 
.moji-6 { top: 78%; right: 22%; } 
.moji-7 { top: 82%; right: 15%; } 
.moji-8 { top: 75%; right: 10%; }

/* 文字装饰元素位置（中等屏幕） */
@media screen and (max-width: 1387px) and (min-width: 481px) { 
    .moji-1 { top: 20%; left: 20%; } 
    .moji-2 { top: 24%; left: 12%; } 
    .moji-3 { top: 32%; left: 5%; } 
    .moji-4 { top: 42%; left: 1%; } 
    .moji-5 { top: 84%; right: 30%; } 
    .moji-6 { top: 78%; right: 24%; } 
    .moji-7 { top: 82%; right: 15%; } 
    .moji-8 { top: 75%; right: 10%; } 
}

/* 文字装饰元素位置（小屏幕） */
@media screen and (max-width: 480px) { 
    .moji-element { 
        width: 60px; 
        height: 60px; 
    } 
    .moji-1 { top: 32%; left: 25%; } 
    .moji-2 { top: 35%; left: 14%; } 
    .moji-3 { top: 42%; left: 5%; } 
    .moji-4 { top: 50%; left: 1%; } 
    .moji-5 { top: 90%; right: 52%; } 
    .moji-6 { top: 88%; right: 35%; } 
    .moji-7 { top: 84%; right: 20%; } 
    .moji-8 { top: 78%; right: 8%; } 
}

/* 文字装饰元素位置（超小屏幕） */
@media screen and (max-width: 480px) { 
    .moji-element { 
        width: 50px; 
        height: 50px; 
    } 
}

/* ============================================================
   第六部分：首页（index）专用样式
   ============================================================ */

/* --- 标题 Logo --- */
/* 首页标题 Logo 容器 */
.title-logo { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    margin: 0 auto; 
    width: 100%; 
    max-width: 1200px; 
    padding: 4rem; 
    box-sizing: border-box; 
    transition: all 0.3s ease; 
    transform: skew(-20deg); 
    cursor: pointer; 
}

.title-logo img { 
    max-width: 400px; 
    height: auto; 
    object-fit: contain; 
    transform: skew(20deg); 
    transition: transform 0.3s ease; 
}

.title-logo:hover { 
    transform: translateY(-5px) scale(1.02) skew(-20deg); 
}

.title-logo:active { 
    transform: scale(0.98) skew(-20deg); 
    transition: transform 0.1s ease; 
}

/* 标题 Logo 响应式 */
@media screen and (max-width: 1388px) { 
    .title-logo { 
        max-width: 1000px; 
        padding: 3rem; 
    } 
    .title-logo img { 
        max-width: 350px; 
    } 
}

@media screen and (max-width: 768px) { 
    .title-logo { 
        max-width: 100%; 
        padding: 2rem; 
        margin: 0 auto; 
    } 
    .title-logo img { 
        max-width: 250px; 
    } 
    /* 移动端禁用 title-logo hover 效果 */
    .title-logo:hover { 
        transform: skew(-20deg); 
    } 
    /* 移动端启用 title-logo active 效果 */
    .title-logo:active { 
        transform: scale(0.9) skew(-20deg) !important; 
        transition: transform 0.1s ease !important; 
    } 
}

/* --- 轮播图组件 --- */
/* 首页顶部轮播图容器 */
.inidac-top-slider { 
    height: 100%; 
    margin: 0 auto 50px; 
    width: 100%; 
    max-width: 1200px; 
    padding: 0; 
    box-sizing: border-box; 
    position: relative; 
    min-width: 0; 
}

/* 轮播图主容器 */
.inidac-top-slider .el-carousel { 
    overflow: visible; 
    width: 100%; 
    max-width: 100%; 
    margin: 0 auto; 
    position: relative; 
}

/* 轮播图视图容器 */
.inidac-top-slider .el-carousel--view { 
    overflow: visible; 
    margin: 0 auto; 
    background: none; 
    border: none; 
    position: relative; 
    width: 100%; 
    max-width: 90%; 
    aspect-ratio: 16/9; 
}

/* 轮播图单个项目 */
.inidac-top-slider .el-carousel--item { 
    background-size: contain; 
    border: solid #fff 4px; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    opacity: 0; 
    transform: scale(0.8); 
    z-index: 1; 
    transition: opacity 0.8s ease, transform 0.8s ease; 
}

/* 当前显示的轮播项 */
.inidac-top-slider .el-carousel--item.current { 
    opacity: 1; 
    transform: scale(1); 
    z-index: 99; 
}

/* 隐藏的轮播项 */
.inidac-top-slider .el-carousel--item.hidden { 
    opacity: 0; 
    transform: scale(0.8); 
    z-index: 1; 
    pointer-events: none; 
}

/* 单图模式隐藏导航和指示器 */
.inidac-top-slider.single-item .el-carousel--view-nav { 
    display: none; 
}

.inidac-top-slider.single-item .carousel-indicators { 
    display: none; 
}

/* 轮播图图片 */
.inidac-top-slider .el-carousel--item img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    border-radius: 5px; 
}

.inidac-top-slider .el-carousel--item-content { 
    display: none; 
}

/* 轮播图导航按钮 */
.inidac-top-slider .el-carousel--view-nav { 
    position: absolute; 
    z-index: 100; 
    opacity: 1; 
    background: transparent; 
    border: none; 
    cursor: pointer; 
    transition: all 0.8s ease; 
    width: 38px; 
    height: 69px; 
    text-indent: -9999px; 
    overflow: hidden; 
    top: 50%; 
    transform: translateY(-50%); 
}

.inidac-top-slider .el-carousel--view-nav:active { 
    transform: translateY(-50%) scale(0.9); 
    transition: transform 0.1s ease; 
}

/* 下一张按钮 */
.inidac-top-slider .el-carousel--view-nav.next { 
    opacity: 1; 
    background: url('/images/arrow_right.png.webp') center center/contain no-repeat; 
    right: -50px; 
}

/* 上一张按钮 */
.inidac-top-slider .el-carousel--view-nav.prev { 
    opacity: 1; 
    background: url('/images/arrow_left.png.webp') center center/contain no-repeat; 
    left: -50px; 
}

/* 轮播图导航按钮响应式 */
@media screen and (max-width: 768px) { 
    .inidac-top-slider .el-carousel--view-nav.next { 
        width: 30px; 
        height: 55px; 
        right: -35px; 
    } 
    .inidac-top-slider .el-carousel--view-nav.prev { 
        width: 30px; 
        height: 55px; 
        left: -35px; 
    } 
}

@media screen and (max-width: 480px) { 
    .inidac-top-slider .el-carousel--view-nav.next { 
        width: 25px; 
        height: 45px; 
        right: -30px; 
    } 
    .inidac-top-slider .el-carousel--view-nav.prev { 
        width: 25px; 
        height: 45px; 
        left: -30px; 
    } 
    .inidac-top-slider { 
        padding: 0; 
        margin: 20px auto 20px; 
    } 
}

/* --- 轮播图指示器 --- */
/* 轮播图指示器容器 */
.carousel-indicators { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    margin: 20px 0; 
    gap: 10px; 
    position: relative; 
    z-index: 101; 
}

/* 单个指示点 */
.carousel-dot { 
    display: inline-block; 
    width: 12px; 
    height: 12px; 
    background-color: rgba(255, 255, 255, 0.5); 
    border-radius: 50%; 
    cursor: pointer; 
    transition: all 0.3s ease; 
    border: 2px solid rgba(255, 255, 255, 0.8); 
}

/* 激活状态的指示点 */
.carousel-dot.active { 
    background-color: #fff; 
    transform: scale(1.2); 
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8); 
}

.carousel-dot:hover { 
    background-color: rgba(255, 255, 255, 0.8); 
    transform: scale(1.1); 
}

/* 指示器响应式 */
@media screen and (max-width: 768px) { 
    .carousel-indicators { 
        margin: 15px 0; 
        gap: 8px; 
    } 
    .carousel-dot { 
        width: 10px; 
        height: 10px; 
    } 
}


/* --- 新闻项样式（首页和新闻页共用） --- */
/* 新闻项容器（首页最新新闻列表项） */
.inidac-news--item { 
    box-shadow: 0.5rem 0.5rem 0 0 #111; 
    position: relative; 
    display: block; 
    margin: 0 auto 20px; 
    border: solid 3px #111; 
    background: #fff; 
    color: #111; 
    width: min(100%, 900px); 
    min-height: clamp(110px, 8vw + 60px, 130px); 
    padding: clamp(14px, 1.5vw + 8px, 20px) clamp(25px, 3vw + 10px, 40px); 
    box-sizing: border-box; 
    min-width: 0; 
}

/* 新闻项分隔线 */
.inidac-news--item::after { 
    content: ''; 
    position: absolute; 
    top: clamp(52px, 4vw + 30px, 60px); 
    left: 50%; 
    display: block; 
    border-top: #000 solid 2px; 
    transform: translateX(-50%); 
    width: clamp(85%, 95% - 2vw, 95%); 
}

/* 新闻日期 */
.inidac-news--date { 
    color: #ee6d4e; 
    font-weight: bold; 
    margin-top: 0px; 
    font-size: clamp(14px, 1.2vw + 10px, 18px); 
}

/* 新闻标题 */
.inidac-news--title { 
    color: #111; 
    font-size: clamp(16px, 1.8vw + 12px, 24px); 
    font-weight: bold; 
    line-height: 1.2; 
    padding: clamp(20px, 2vw + 16px, 28px) 6px 0px; 
    word-wrap: break-word; 
    overflow-wrap: break-word; 
}

/* 新闻分类标签 */
.inidac-news--categories { 
    position: absolute; 
    top: 14px; 
    right: clamp(20px, 3vw + 10px, 40px); 
    background-position: center; 
    background-size: 100%; 
    background-repeat: no-repeat; 
    font-size: 12px; 
    background-color: #ff6b35; 
    border-radius: 4px; 
    color: #fff; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-weight: bold; 
    width: clamp(82px, 8vw + 30px, 124px); 
    height: clamp(20px, 1.2vw + 14px, 28px); 
}

/* ============================================================
   第七部分：新闻页（news）专用样式
   ============================================================ */



/* --- 文章容器 --- */
/* 文章容器基础样式 */
article { 
    margin: 0 auto 20px; 
    max-width: 900px; 
}

/* --- 新闻项交互效果（新闻页专用） --- */
/* 新闻项悬停和点击效果 */
.inidac-news--item { 
    transition: all 0.3s ease; 
}

.inidac-news--item:hover { 
    transform: translateY(-5px) scale(1.02); 
    box-shadow: 0.8rem 0.8rem 0 0 #111; 
}

/* 移动端禁用新闻项 hover 效果 */
@media screen and (max-width: 768px) { 
    .inidac-news--item:hover { 
        transform: none; 
        box-shadow: 0.5rem 0.5rem 0 0 #111; 
    } 
}

.inidac-news--item:active { 
    transform: scale(0.98); 
    transition: transform 0.1s ease; 
}

/* --- 导航链接按钮（返回列表按钮） --- */
/* 导航链接按钮容器（用于返回列表等操作） */
.inidac-nav-link { 
    position: relative; 
    display: block; 
    height: 3rem; 
    min-width: 7rem; 
    width: 150px; 
    margin: 30px auto; 
    cursor: pointer; 
    transition: transform 0.1s ease; 
}

.inidac-nav-link::before, 
.inidac-nav-link::after { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: -2rem; 
    bottom: 0; 
    display: block; 
    width: calc(100% + 4rem); 
    height: 100%; 
    background: center center / contain no-repeat; 
}

.inidac-nav-link::before { 
    background-color: #f2f2f2; 
    box-shadow: inset 0 0 0 2px #f2f2f2, inset 0 0 0 4px #111; 
}

.inidac-nav-link:hover::before { 
    background: linear-gradient(to bottom, #111 35%, #666 48%, #666 52%, #111 58%); 
    box-shadow: inset 0 0 0 2px #f2f2f2, inset 0 0 0 4px #111; 
}

.inidac-nav-link:active { 
    transform: translate(0.2rem, 0.2rem);
    transition: transform 0.1s ease;
}

.inidac-nav-link::after { 
    box-shadow: 0.5rem 0.5rem 0 0 #111;
    transition: box-shadow 0.1s ease;
}

.inidac-nav-link:active::after {
    box-shadow: 0.3rem 0.3rem 0 0 #111;
}

/* 导航链接文字 */
.inidac-nav-link--text { 
    position: relative; 
    z-index: 1; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    width: 100%; 
    height: 100%; 
    font-size: 1.2rem; 
    font-weight: bold; 
    text-decoration: none; 
    color: #111; 
    padding-left: 1rem; 
}

/* 导航链接左侧箭头 */
.inidac-nav-link--text::before { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    height: 1ex; 
    margin: auto; 
    font-size: 1.25rem; 
    line-height: 1.35ex; 
    transform: translateY(-4px); 
    pointer-events: none; 
    content: '«'; 
    left: -1rem; 
    transition: 300ms left; 
}

.inidac-nav-link:hover > .inidac-nav-link--text { 
    color: #f2f2f2; 
}

.inidac-nav-link:hover > .inidac-nav-link--text::before { 
    left: -1.5rem; 
}

/* --- 分页器样式（新闻页专用） --- */
/* 分页器容器 */
.pagination {
  display: flex;
  justify-content: center;
  margin: 50px auto 0px auto !important;
  height: 50px;
  overflow: hidden;
  text-align: center;
}

/* 分页页码 */
.pagination .page-numbers {
  display: block !important;
  float: left;
  margin: 5px 3px 0px 3px;
  width: 64px !important;
  height: 45px !important;
  font-size: 1.5em;
  color: #000 !important;
  box-sizing: border-box;
  transition: all 0.3s ease;
  text-decoration: none;
  line-height: 45px;
  text-align: center;
  padding-right: 5px;
}

/* 当前页码样式 */
.pagination span.current {
  color: #ffffff !important;
  background: url(/images/news-pager-btn.png) 0px -45px no-repeat;
}

/* 普通页码链接样式 */
.pagination a.page-numbers:not(.next):not(.prev) {
  background: url(/images/news-pager-btn.png) 0px 0px no-repeat;
}

/* 省略号样式 */
.pagination .page-numbers.dots {
  color: #000000 !important;
  font-weight: bold;
  background: none !important;
}

/* 上一页/下一页按钮 */
.pagination a.next,
.pagination a.prev {
  display: block;
  width: 30px !important;
  height: 50px !important;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  background-size: 80% auto;
  background-repeat: no-repeat;
}

/* 下一页按钮 */
.pagination a.next {
  background-image: url(/images/news_page_arrowR.png);
  background-position: right bottom;
  margin: 0 0 0 10px;
}

/* 上一页按钮 */
.pagination a.prev {
  background-image: url(/images/news_page_arrowL.png);
  background-position: left bottom;
  margin: 0 10px 0 0;
}

/* --- 文章详情页样式 --- */
/* 文章内容容器 */
.post-content .bg_white_middle { 
    background: #fff; 
    border: solid 3px #111; 
    box-shadow: 0.5rem 0.5rem 0 0 #111; 
    padding: 30px; 
}

/* 文章正文内容 */
.post-content .entry-content { 
    color: #111; 
    line-height: 1.8; 
}

.post-content .entry-content p { 
    margin: 0 0 1rem; 
}

.post-content .entry-content img { 
    max-width: 100%; 
    height: auto; 
    display: block; 
    margin: 1rem auto; 
}

.post-content .entry-content ul, 
.post-content .entry-content ol { 
    padding-left: 1.25rem; 
    margin: 0.5rem 0 1rem; 
}

/* --- 页面过渡动画（新闻页内容切换） --- */
/* 页面进入动画 */
.page-transition-enter { 
    opacity: 0; 
    transform: translateY(20px); 
}

.page-transition-enter-active { 
    opacity: 1; 
    transform: translateY(0); 
    transition: all 0.4s ease-out; 
}

/* 页面退出动画 */
.page-transition-exit { 
    opacity: 1; 
    transform: translateY(0); 
}

.page-transition-exit-active { 
    opacity: 0; 
    transform: translateY(-20px); 
    transition: all 0.3s ease-in; 
}

/* 隐藏默认导航链接 */
.navigation {
  display: none !important;
}

/* ============================================================
   第八部分：排行榜页（rank）专用样式
   ============================================================ */


/* --- 排行榜描述文本 --- */
/* 排行榜说明文本容器 */
.ranking-about-text { 
    width: 100%; 
    line-height: 1.8; 
    margin-bottom: 1.2rem; 
    color: #000; 
    text-align: center; 
    text-shadow: 1px 1px 0 #e0e0e0, -1px 1px 0 #e0e0e0, 1px -1px 0 #e0e0e0, -1px -1px 0 #e0e0e0; 
    font-size: 1.1em; 
    font-weight: bold; 
    font-family: "YU GOTHIC", "游ゴシック", "Noto Sans JP", sans-serif; 
    font-feature-settings: "palt"; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 0.3rem; 
}

.ranking-about-text .ranking-text { 
    display: block; 
    width: 100%; 
}

.ranking-about-text .ranking-text .flag { 
    display: inline; 
    white-space: nowrap; 
}

.ranking-about-text .ranking-text .flag:not(:last-child) { 
    margin-right: 0.3em; 
}

/* 排行榜描述文本响应式 */
@media screen and (max-width: 768px) {
    .ranking-about-text { 
        font-size: 1em; 
        gap: 0.2rem; 
    } 
    .ranking-about-text .ranking-text .flag { 
        white-space: normal; 
    } 
}

/* --- 筛选器区域 --- */
/* 筛选器容器 */
.SelectArea { 
    max-width: 50rem; 
    margin: 0 auto; 
}

/* 筛选器内部容器 */
.SelectArea--inner1 { 
    display: flex; 
    justify-content: space-between; 
    margin: 0 -1rem; 
}

/* 筛选器下拉框 */
.SelectBox { 
    display: block; 
    width: 100%; 
    height: 2rem; 
    margin: 0 1rem; 
    border: 2px solid #111; 
    color: #111; 
    font-size: 1rem; 
    overflow: hidden !important; 
    background: #fff; 
    padding: 0 8px; 
}

/* 筛选器响应式 */
@media screen and (max-width: 1388px) { 
    .SelectArea--inner1 { 
        flex-direction: column; 
        align-items: center; 
    } 
    .SelectBox { 
        margin: 0.5rem 0; 
        max-width: 300px; 
    } 
}

/* --- 排行榜内容容器 --- */
/* 排行榜内容区域 */
#ranking-content { 
    margin: 2rem auto; 
    width: 100%; 
    max-width: 100%; 
    box-sizing: border-box; 
    margin: 1rem auto; 
    padding: 0 clamp(1rem, 8vw + 1rem, 1rem); 
}

/* 排行榜列表容器 */
.ranking-list { 
    margin: 2rem auto; 
    width: 100%; 
    max-width: 100%; 
    box-sizing: border-box; 
}

@media screen and (min-width: 1389px) { 
    .ranking-list { 
        width: 1200px; 
    } 
}

@media screen and (max-width: 1388px) { 
    .ranking-list { 
        max-width: 100%; 
    } 
}

/* 内容区块基础样式（用于 profile 等页面的内容切换） */
.content-section { 
    display: none; 
}

.content-section.active { 
    display: block; 
}

/* 排行榜更新时间显示 */
.ranking-list--calcDate { 
    margin-bottom: 2rem; 
    text-align: center; 
    transform: skewX(-10deg); 
    box-sizing: border-box; 
}

/* 无数据提示 */
.ranking-list .nodata { 
    text-align: center; 
}

/* --- 排行榜列表项基础样式 --- */
/* 单个排行榜项容器 */
.ranking-list-item { 
    font-family: "YU GOTHIC", "游ゴシック", "Noto Sans JP", sans-serif; 
    font-feature-settings: "palt"; 
    position: relative; 
    display: flex; 
    align-items: center; 
    width: 100%; 
    max-width: 100%; 
    margin-bottom: 1rem; 
    color: #111; 
    box-sizing: border-box; 
}

@media screen and (min-width: 1201px) { 
    .ranking-list-item { 
        display: flex; 
        height: 5rem; 
    } 
}

@media screen and (max-width: 1200px) { 
    .ranking-list-item { 
        height: 5rem; 
    } 
}

/* 排行榜项背景装饰层 */
.ranking-list-item::before { 
    box-shadow: 0.5rem 0.5rem 0 0 #111; 
    content: ''; 
    position: absolute; 
    top: 0; 
    display: block; 
    height: 100%; 
    border: 2px solid #111; 
    transform: skewX(-20deg); 
}

@media screen and (min-width: 1201px) { 
    .ranking-list-item::before { 
        left: 0; 
        width: 100%; 
    } 
}

@media screen and (max-width: 1200px) { 
    .ranking-list-item::before { 
        left: 8%; 
        width: 85%; 
    } 
}

/* 排行榜项排名颜色样式 */
/* 第一名：金色 */
.ranking-list-item.gold::before { 
    background-image: linear-gradient(to bottom, #fcfaec, #c29a00); 
}

@media screen and (max-width: 1200px) { 
    .ranking-list-item.gold::before { 
        background-image: linear-gradient(to bottom, #fcfaec 0%, #c29a00 50%); 
    } 
}

/* 第二名：银色 */
.ranking-list-item.silver::before { 
    background-image: linear-gradient(to bottom, #fbfbfb, #a1a19f); 
}

@media screen and (max-width: 1200px) { 
    .ranking-list-item.silver::before { 
        background-image: linear-gradient(to bottom, #fbfbfb 0%, #a1a19f 50%); 
    } 
}

/* 第三名：铜色 */
.ranking-list-item.bronze::before { 
    background-image: linear-gradient(to bottom, #f9eadc, #d37334); 
}

@media screen and (max-width: 1200px) { 
    .ranking-list-item.bronze::before { 
        background-image: linear-gradient(to bottom, #f9eadc 0%, #d37334 50%); 
    } 
}

/* 其他排名：普通绿色 */
.ranking-list-item.normal::before { 
    background-image: linear-gradient(to bottom, #eaf2e0, #628b4a); 
}

@media screen and (max-width: 1200px) { 
    .ranking-list-item.normal::before { 
        background-image: linear-gradient(to bottom, #eaf2e0 0%, #628b4a 50%); 
    } 
}

/* 排行榜项内部元素层级 */
.ranking-list-item > * { 
    position: relative; 
    z-index: 1; 
}
/* --- 排行榜项子元素样式 --- */
/* 排名框 */
.ranking-list-item--rankBox { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    flex: 0 4rem; 
    height: 100%; 
}

/* 名称框 */
.ranking-list-item--nameBox { 
    display: flex; 
    align-items: center; 
    flex: 0 10rem; 
    height: 100%; 
    font-style: italic; 
}

/* 玩家名称 */
.ranking-list-item--name { 
    text-shadow: 0px 0px 1px #111, 0px 0px 1px #111, 0px 0px 1px #111, 0px 0px 1px #111, 0px 0px 1px #111, -1px 2px 1px #111, 0px 2px 1px #111, 1px 2px 1px #111, 2px 2px 1px #111; 
    color: #f2f2f2; 
    font-weight: bold; 
}

@media screen and (min-width: 1201px) { 
    .ranking-list-item--name { 
        font-size: 1.5rem; 
    } 
}

@media screen and (max-width: 1200px) { 
    .ranking-list-item--name { 
        font-size: 1.2rem; 
    } 
}

/* 车型名称（计时赛排行榜） */
.ranking-list-item--carname { 
    font-size: 1.15rem; 
    font-style: italic; 
    font-weight: bold; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    font-family: "YU GOTHIC", "游ゴシック", "Noto Sans JP", sans-serif; 
}

/* 图标容器 */
.ranking-list-item--image { 
    flex: 0.9; 
    height: 100%; 
}

.ranking-list-item[data-mode="pride"] .ranking-list-item--image { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

.ranking-list-item--image img { 
    max-height: 32px; 
    display: block; 
}

.ranking-list-item[data-mode="pride"] .ranking-list-item--image img { 
    max-height: 90px; 
}

/* 评价图标 */
.ranking-list-item .titleIcon { 
    position: absolute; 
    left: 110px; 
}

@media screen and (min-width: 1201px) { 
    .ranking-list-item .titleIcon { 
        top: 24px; 
    } 
}

@media screen and (max-width: 1200px) { 
    .ranking-list-item .titleIcon { 
        top: 25px; 
    } 
}

/* 名声图标（名声排行榜） */
.ranking-list-item .prideIcon { 
    position: relative; 
}

@media screen and (min-width: 1200px) { 
    .ranking-list-item .prideIcon { 
        width: 90px; 
        height: 90px; 
    } 
}

@media screen and (max-width: 1200px) { 
    .ranking-list-item .prideIcon { 
        top: 0px; 
        left: -2px; 
        width: 45px; 
        height: 45px; 
    } 
}

.ranking-list-item .prideIcon--icon { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
}

.ranking-list-item .prideIcon--point { 
    position: absolute; 
    color: #000; 
    display: block; 
    width: 100%; 
    height: 1em; 
    line-height: 1; 
    text-align: center; 
    font-style: italic; 
    font-weight: bold; 
    text-shadow: 1px 1px 1px #fff, 0px 0px 1px #fff, -1px 0px 1px #fff, 0px -1px 1px #fff, 0px 0px 2px #fff, 1px 0px 1px #fff, 0px 1px 1px #fff, 1px 1px 2px #fff, 0px 0px 3px #fff; 
}

@media screen and (min-width: 1200px) { 
    .ranking-list-item .prideIcon--point { 
        top: 37px; 
        left: 0; 
        font-size: 16px; 
    } 
}

@media screen and (max-width: 1200px) { 
    .ranking-list-item .prideIcon--point { 
        top: 17px; 
        left: 0; 
        font-size: 10px; 
    } 
}

/* 记录框（点数或时间） */
.ranking-list-item--record { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    flex: 0 10rem; 
    height: 100%; 
    background-color: #111; 
    color: #f2f2f2; 
    font-size: 1.75rem; 
    font-style: italic; 
    line-height: 1.1; 
    text-align: center; 
    white-space: nowrap; 
}

@media screen and (min-width: 1201px) { 
    .ranking-list-item--record .adv { 
        font-size: 1.1rem; 
    } 
}

@media screen and (max-width: 1200px) { 
    .ranking-list-item--record .adv { 
        font-size: 0.7rem; 
    } 
}

/* 店铺信息框 */
.ranking-list-item--shopBox { 
    display: flex; 
    align-items: center; 
    height: 100%; 
    max-width: 20rem; 
    margin-left: -28px; 
    padding-right: 22rem; 
    text-align: right; 
    white-space: nowrap; 
}

.ranking-list-item--shopBox .shopname { 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    font-style: italic; 
    font-weight: bold; 
    overflow: hidden; 
}

@media screen and (min-width: 1201px) { 
    .ranking-list-item--shopBox .shopname { 
        width: 324px; 
        padding-right: 3px; 
    } 
}

@media screen and (max-width: 1200px) { 
    .ranking-list-item--shopBox .shopname { 
        width: 60px; 
    } 
}

.ranking-list-item--shopBox .updateDate { 
    font-style: italic; 
    font-weight: bold; 
}

.ranking-list-item-bottom .ranking-list-item--shopBox .updateDate { 
    margin-top: -4px; 
    font-size: 12px; 
    text-align: left; 
}

/* 排名数字显示 */
.ranking-list-item--rank { 
    text-shadow: 0px 0px 1px #111, 0px 0px 1px #111, 0px 0px 1px #111, 0px 0px 1px #111, 0px 0px 1px #111, -1px 2px 1px #111, 0px 2px 1px #111, 1px 2px 1px #111, 2px 2px 1px #111; 
    width: 7rem; 
    color: #f2f2f2; 
    font-size: 3rem; 
    font-style: italic; 
    text-align: center; 
    white-space: nowrap; 
    -webkit-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
}
/* --- 排行榜项移动端布局 --- */
/* 桌面端：使用 contents 布局（不创建额外容器） */
@media screen and (min-width: 1200px) { 
    .ranking-list-item-top { 
        display: contents; 
    } 
    .ranking-list-item-bottom { 
        display: contents; 
    } 
}

/* 移动端：分为上下两部分布局 */
@media screen and (max-width: 1200px) { 
    .ranking-list-item { 
        display: block; 
        height: auto; 
        min-height: 4rem; 
        margin-bottom: 1rem; 
    } 
    
    .ranking-list-item::before { 
        left: 0; 
        width: 100%; 
        height: 100%; 
    } 
    
    /* 移动端顶部区域 */
    .ranking-list-item-top { 
        position: relative; 
        display: flex; 
        height: 3rem; 
        z-index: 10; 
    } 
    
    /* 移动端底部区域 */
    .ranking-list-item-bottom { 
        position: relative; 
        display: flex; 
        justify-content: space-around; 
        align-items: center; 
        width: calc(100% - 4px); 
        height: 2rem; 
        margin: 0px 0px 0px -6px; 
        padding: 0 15px; 
        background: #fff; 
        text-align: center; 
        transform: skew(-20deg); 
        z-index: 10; 
    } 
    
    /* 移动端排名框 */
    .ranking-list-item--rankBox { 
        position: absolute; 
        top: 0px; 
        left: 20px; 
        width: 3rem; 
        height: 3rem; 
    } 
    
    .ranking-list-item--rank { 
        font-size: 1.5rem; 
        width: 100%; 
        height: 100%; 
    } 
    
    /* 移动端名称框 */
    .ranking-list-item--nameBox { 
        position: absolute; 
        top: 0px; 
        left: 80px; 
        right: 90px; 
        margin-left: 0; 
        margin-right: 0; 
    } 
    
    .ranking-list-item--name { 
        font-size: 1rem; 
    } 
    
    .ranking-list-item--carname { 
        font-size: 0.9rem; 
        margin-top: -2px; 
        font-family: "YU GOTHIC", "游ゴシック", "Noto Sans JP", sans-serif; 
    } 
    
    /* 移动端记录框 */
    .ranking-list-item--record { 
        position: absolute; 
        right: -16px; 
        top: 0px; 
        display: block; 
        width: 80px; 
        height: 100%; 
        padding: 12px 0px 0px; 
        font-size: 1rem; 
        text-align: center; 
        background-color: transparent; 
    } 
    
    .ranking-list-item--record-bg-sp { 
        position: absolute; 
        top: 0; 
        right: 0; 
        z-index: -1; 
        display: block; 
        width: 100%; 
        height: 100%; 
        background-color: #111; 
        transform: skew(-20deg); 
    } 
    
    /* 移动端图标区域 */
    .ranking-list-item-bottom .ranking-list-item--image { 
        position: relative; 
        transform: skew(20deg); 
        display: flex; 
        align-items: center; 
        z-index: 11; 
    } 
    
    .ranking-list-item[data-mode="pride"] .ranking-list-item-bottom .ranking-list-item--image { 
        justify-content: flex-end; 
    } 
    
    .ranking-list-item-bottom .ranking-list-item--image img { 
        max-height: 20px; 
        display: block; 
        margin-left: 20px; 
    } 
    
    .ranking-list-item-bottom .ranking-list-item--image .titleIcon { 
        position: static; 
        left: auto; 
        top: auto; 
    } 
    
    .ranking-list-item[data-mode="pride"] .ranking-list-item-top .ranking-list-item--image { 
        position: absolute; 
        right: 68px; 
    } 
    
    .ranking-list-item[data-mode="pride"] .ranking-list-item-top .ranking-list-item--image img { 
        max-height: 45px; 
    } 
    
    /* 移动端店铺信息框 */
    .ranking-list-item--shopBox { 
        position: relative; 
        transform: skew(20deg); 
        padding: 0; 
    } 
    
    .ranking-list-item--shopBox .shopname { 
        width: auto; 
        max-width: 100%; 
        font-size: 12px; 
        text-align: left; 
    } 
    
    .ranking-list-item--shopBox .updateDate { 
        margin-top: -2px; 
        font-size: 12px; 
        text-align: left; 
        margin-left: 0; 
    } 
}

/* --- 排名图标样式（前3名使用图片） --- */
/* 排名图标基础样式 */
.ranking-list-item--rank.image { 
    color: transparent; 
    text-shadow: none; 
}

/* 第一名：金色图标 */
.ranking-list-item--rank.rank1.image { 
    background: url("/images/Num_Gold_1.png.webp") center center/50px auto no-repeat !important; 
    color: transparent !important; 
    text-shadow: none !important; 
}

/* 第二名：银色图标 */
.ranking-list-item--rank.rank2.image { 
    background: url("/images/Num_Silver_2.png.webp") center center/50px auto no-repeat !important; 
    color: transparent !important; 
    text-shadow: none !important; 
}

/* 第三名：铜色图标 */
.ranking-list-item--rank.rank3.image { 
    background: url("/images/Num_Bronze_3.png.webp") center center/50px auto no-repeat !important; 
    color: transparent !important; 
    text-shadow: none !important; 
}

/* 移动端排名图标尺寸 */
@media screen and (max-width: 1200px) { 
    .ranking-list-item--rank.rank1.image { 
        background: url("/images/Num_Gold_1.png.webp") center center/24px auto no-repeat !important; 
    } 
    .ranking-list-item--rank.rank2.image { 
        background: url("/images/Num_Silver_2.png.webp") center center/24px auto no-repeat !important; 
    } 
    .ranking-list-item--rank.rank3.image { 
        background: url("/images/Num_Bronze_3.png.webp") center center/24px auto no-repeat !important; 
    } 
}

/* 第4-15名：使用文字显示 */
.ranking-list-item--rank.rank4, 
.ranking-list-item--rank.rank5, 
.ranking-list-item--rank.rank6, 
.ranking-list-item--rank.rank7, 
.ranking-list-item--rank.rank8, 
.ranking-list-item--rank.rank9, 
.ranking-list-item--rank.rank10, 
.ranking-list-item--rank.rank11, 
.ranking-list-item--rank.rank12, 
.ranking-list-item--rank.rank13, 
.ranking-list-item--rank.rank14, 
.ranking-list-item--rank.rank15 { 
    color: #f2f2f2; 
    text-shadow: 0px 0px 1px #111, 0px 0px 1px #111, 0px 0px 1px #111, 0px 0px 1px #111, 0px 0px 1px #111, -1px 2px 1px #111, 0px 2px 1px #111, 1px 2px 1px #111, 2px 2px 1px #111; 
    background: none; 
}

/* --- 团队联赛颜色变量 --- */
/* 团队联赛等级颜色定义 */

/* 联赛等级 6：紫色 */
.league6 { 
    --league-color: #670282; 
} 

/* 联赛等级 5：蓝紫色 */
.league5 { 
    --league-color: #7222e0; 
} 

/* 联赛等级 4：橙色 */
.league4 { 
    --league-color: #cf8900; 
} 

/* 联赛等级 3：蓝灰色 */
.league3 { 
    --league-color: #7f96ae; 
} 

/* 联赛等级 2：深棕色 */
.league2 { 
    --league-color: #603427; 
} 

/* 联赛等级 1：黄绿色 */
.league1 { 
    --league-color: #c6ff00; 
} 

/* 联赛等级 0：浅米色 */
.league0 { 
    --league-color: #e6e6cf; 
}

/* --- 团队排行榜专用样式 --- */
/* 有成员的团队排行榜项（高度增加） */
.hasmember.ranking-list-item { 
    height: 7.4rem; 
}

@media screen and (max-width: 1200px) { 
    .hasmember.ranking-list-item { 
        height: 6.4rem; 
    } 
}

.hasmember.ranking-list-item .ranking-list-item-bottom { 
    margin: 0 0 0 -10px; 
    justify-content: flex-end; 
}

/* 无成员的团队名称框 */
.ranking-list-item:not(.hasmember) .ranking-list-item--nameBox.team { 
    --underline-height: 1rem; 
    height: 85%; 
    position: relative; 
    background: linear-gradient(90deg, black 50%, transparent) transparent; 
    transform: skewX(-20deg); 
    z-index: auto; 
}

@media screen and (min-width: 1201px) { 
    .ranking-list-item:not(.hasmember) .ranking-list-item--nameBox.team { 
        margin-left: 1rem; 
        flex: 0 30rem; 
    } 
}

@media screen and (max-width: 1200px) { 
    .ranking-list-item:not(.hasmember) .ranking-list-item--nameBox.team { 
        top: 3px; 
        left: 28%; 
        flex: 0 10.4rem; 
    } 
}

/* 无成员团队名称框的边框装饰（使用联赛颜色） */
.ranking-list-item:not(.hasmember) .ranking-list-item--nameBox.team::before { 
    content: ''; 
    display: block; 
    position: absolute; 
    left: 0; 
    top: 0%; 
    width: 100%; 
    height: 100%; 
    border: 0.2rem solid; 
    border-image: linear-gradient(99deg, var(--league-color) 0%, transparent); 
    border-left: 0.2rem solid var(--league-color); 
    border-image-slice: 1; 
    border-right: none; 
}

.ranking-list-item:not(.hasmember) .team-index { 
    width: 100%; 
}

/* 有成员的团队名称框 */
.ranking-list-item.hasmember .ranking-list-item--nameBox.team { 
    --underline-height: 1rem; 
    height: 85%; 
    position: relative; 
    z-index: auto; 
}

@media screen and (min-width: 1201px) { 
    .ranking-list-item.hasmember .ranking-list-item--nameBox.team { 
        display: block; 
        margin: 0 0 0 1rem; 
        flex: 0 30rem; 
    } 
}

@media screen and (max-width: 1200px) { 
    .ranking-list-item.hasmember .ranking-list-item--nameBox.team { 
        top: 3px; 
        flex: 0 10.4rem; 
        background: linear-gradient(90deg, black 50%, transparent) transparent; 
        transform: skewX(-20deg); 
    } 
    .ranking-list-item.hasmember .ranking-list-item--nameBox.team::before { 
        content: ''; 
        display: block; 
        position: absolute; 
        left: 0; 
        top: 0%; 
        width: 100%; 
        height: 100%; 
        border: 0.2rem solid; 
        border-image: linear-gradient(99deg, var(--league-color) 0%, transparent); 
        border-left: 0.2rem solid var(--league-color); 
        border-image-slice: 1; 
        border-right: none; 
    } 
}

/* 团队索引容器 */
.ranking-list-item.hasmember .team-index { 
    position: relative; 
    padding: 0.6rem 1rem; 
    background: linear-gradient(90deg, black 50%, transparent) transparent; 
}

.ranking-list-item.hasmember .team-index::before { 
    content: ''; 
    display: block; 
    position: absolute; 
    left: 0; 
    top: 0%; 
    width: 100%; 
    height: 100%; 
    border: 0.2rem solid; 
    border-image: linear-gradient(99deg, var(--league-color) 0%, transparent); 
    border-left: 0.2rem solid var(--league-color); 
    border-image-slice: 1; 
    border-right: none; 
}

@media screen and (min-width: 1201px) { 
    .ranking-list-item.hasmember .team-index { 
        display: flex; 
        align-items: center; 
        height: 4rem; 
        transform: skewX(-20deg); 
    } 
}

/* 团队成员中间区域 */
.ranking-list-item.hasmember .ranking-list-item-middle { 
    position: relative; 
    width: 100%; 
    height: 1.4rem; 
    margin: -2px 0 0 -1px; 
    padding: 0 0.5rem; 
    background: #111; 
    transform: skew(-20deg); 
}

/* 团队成员列表 */
.ranking-list-item.hasmember .ranking-list-item-team-member { 
    line-height: 1; 
    font-weight: bold; 
    --skew: 25deg; 
}

@media screen and (min-width: 1201px) { 
    .ranking-list-item.hasmember .ranking-list-item-team-member { 
        display: flex; 
        align-items: center; 
        margin-top: 0.5rem; 
        margin-left: -1rem; 
        padding: 0.25rem 0; 
        background: linear-gradient(90deg, black 75%, transparent); 
        color: #fff; 
        font-size: 14px; 
        transform: skew(calc(var(--skew) * -1)); 
    } 
}

@media screen and (max-width: 1200px) { 
    .ranking-list-item.hasmember .ranking-list-item-team-member { 
        display: flex; 
        align-items: center; 
        justify-content: space-around; 
        color: #fff; 
        font-size: 12px; 
    } 
}

/* ACE 玩家名称 */
.ranking-list-item.hasmember .ace-username { 
    display: flex; 
    align-items: flex-end; 
}

@media screen and (min-width: 1201px) { 
    .ranking-list-item.hasmember .ace-username { 
        flex: 12rem; 
        transform: skew(calc(var(--skew) * 1)); 
    } 
}

.ranking-list-item.hasmember .ace-username::before { 
    content: ''; 
    display: inline-block; 
    background: url("/images/team_ace.png") no-repeat center center/contain; 
}

@media screen and (min-width: 1201px) { 
    .ranking-list-item.hasmember .ace-username::before { 
        width: 2.1rem; 
        height: 1.4rem; 
        margin-bottom: -0.2rem; 
    } 
}

@media screen and (max-width: 1200px) { 
    .ranking-list-item.hasmember .ace-username::before { 
        width: 1.7rem; 
        height: 1.1rem; 
        margin-bottom: -0.2rem; 
        transform: skew(20deg); 
    } 
}

/* 队长名称 */
.ranking-list-item.hasmember .leader-username { 
    display: flex; 
    align-items: flex-end; 
}

@media screen and (min-width: 1201px) { 
    .ranking-list-item.hasmember .leader-username { 
        flex: 12rem; 
        transform: skew(calc(var(--skew) * 1)); 
    } 
}

.ranking-list-item.hasmember .leader-username::before { 
    content: ''; 
    display: inline-block; 
    background: url("/images/team_leader.png") no-repeat center center/contain; 
}

@media screen and (min-width: 1201px) { 
    .ranking-list-item.hasmember .leader-username::before { 
        width: 1.4rem; 
        height: 1.4rem; 
        margin-bottom: -0.2rem; 
    } 
}

@media screen and (max-width: 1200px) { 
    .ranking-list-item.hasmember .leader-username::before { 
        width: 1.2rem; 
        height: 1.2rem; 
        margin-bottom: -0.2rem; 
        transform: skew(20deg); 
    } 
}

/* 团队名称样式 */
.ranking-list-item--name.team { 
    position: relative; 
    width: calc(100% - 24%); 
    text-align: center; 
    transform: skewX(20deg); 
    z-index: 2; 
}

@media screen and (min-width: 1201px) { 
    .ranking-list-item--name.team { 
        font-size: 1.5rem; 
    } 
}

@media screen and (max-width: 1200px) { 
    .ranking-list-item--name.team { 
        width: 100%; 
        font-size: 1rem; 
    } 
    .ranking-list-item--name.team.long { 
        padding: 4px 0; 
        font-size: 0.5rem; 
    } 
    .ranking-list-item--name.team.normal { 
        font-size: 0.75rem; 
    } 
    .ranking-list-item--name.team.thin { 
        font-size: 0.8rem; 
    } 
}

/* 团队名称下划线装饰 */
.team-underline { 
    position: absolute; 
    right: 20%; 
    bottom: 25%; 
    width: 60%; 
    height: 0; 
    background-image: linear-gradient(90deg, #000 0%, var(--league-color) 70%, transparent); 
}

@media screen and (min-width: 1201px) { 
    .team-underline { 
        padding-bottom: var(--underline-height); 
    } 
}

@media screen and (max-width: 1200px) { 
    .team-underline { 
        padding-bottom: calc(var(--underline-height) * 0.5); 
    } 
}

.team-underline::after { 
    content: ''; 
    display: block; 
    width: 64%; 
    height: 0; 
    background-image: radial-gradient(rgba(0, 0, 0, 0.5) 17%, transparent 20%), radial-gradient(rgba(0, 0, 0, 0.5) 17%, transparent 20%); 
    padding-bottom: var(--underline-height); 
    transform: skewX(20deg); 
}

@media screen and (min-width: 1201px) { 
    .team-underline::after { 
        padding-bottom: var(--underline-height); 
        background-position: 0 0, 4px 4px; 
        background-size: 8px 8px; 
    } 
}

@media screen and (max-width: 1200px) { 
    .team-underline::after { 
        padding-bottom: calc(var(--underline-height) * 0.5); 
        background-position: 0 0, 2px 2px; 
        background-size: 4px 4px; 
    } 
}

/* 团队联赛图标 */
@media screen and (min-width: 1201px) { 
    .ranking-list-item.hasmember .leagueIcon, 
    .ranking-list-item:not(.hasmember) .leagueIcon { 
        position: absolute; 
        width: 8%; 
        left: 29.5rem; 
        top: -2%; 
        z-index: 1; 
    } 
}

@media screen and (max-width: 1200px) { 
    .ranking-list-item.hasmember .leagueIcon, 
    .ranking-list-item:not(.hasmember) .leagueIcon { 
        width: 34px; 
        position: absolute; 
        top: 50%; 
        left: calc(100% - 92px); 
        transform: translateY(-50%); 
        z-index: 1; 
    } 
}

/* ============================================================
   第九部分：指南页（guide）专用样式
   ============================================================ */


/* --- 指南页容器 --- */
/* 指南页主容器 */
.inidac-guide--box { 
  width: min(100%, clamp(600px, 80vw, 1000px)); 
  margin: clamp(1.25rem, 2vw, 20px) auto clamp(6.25rem, 12vw, 140px); 
}

/* 指南页弹性布局容器 */
.inidac-guide--flexbox { 
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: clamp(3.125rem, 5vw, 70px); 
}

/* --- 指南页文本内容 --- */
/* 指南页文本框容器 */
.inidac-guide--textbox { 
  height: 100%; 
  color: #000; 
  font-weight: bold; 
  font-feature-settings: 'palt'; 
  text-shadow: 1px 1px 0 #e0e0e0, -1px 1px 0 #e0e0e0, 1px -1px 0 #e0e0e0, -1px -1px 0 #e0e0e0; 
  width: 100%; 
  line-height: 1.8; 
  font-size: clamp(0.9em, 1.1vw, 1.1em); 
  text-align: center; 
  margin: 0 auto; 
}

.inidac-guide--textbox p { 
    margin-bottom: clamp(1rem, 2vw, 20px); 
}

/* 注意事项列表 */
.inidac-guide--textbox .caution { 
  text-align: left;
  margin-bottom: clamp(1rem, 2vw, 20px); 
}

.inidac-guide--textbox .caution>li { 
  text-indent: -1em; 
  padding-left: 1em;
  margin-bottom: clamp(0.125rem, 0.3vw, 0.5em); 
}

/* 指南页导航链接 */
.inidac-guide--textbox .inidac-nav-link { 
  font-style: normal; 
  text-shadow: none; 
}

/* 定义列表样式 */
.inidac-guide--textbox dl.definition { 
    margin-bottom: clamp(2rem, 4vw, 40px); 
}

.inidac-guide--textbox dl.definition>dt { 
    font-size: clamp(1rem, 1.5vw, 18px); 
}

.inidac-guide--textbox dl.definition>dd { 
    line-height: 1.4; 
    margin-bottom: clamp(1rem, 2vw, 20px); 
}

.inidac-guide--textbox dl.definition .red { 
    color: red; 
}

.inidac-guide--textbox dl.definition:last-child { 
    margin-bottom: 0px; 
}

/* 左侧对齐文本框 */
.inidac-guide--textbox .textleftbox { 
  width: min(100%, clamp(300px, 60vw, 806px)); 
  margin: 0 auto clamp(2rem, 4vw, 50px); 
  background: rgba(255,255,255,0.7); 
  padding: clamp(1.5rem, 3vw, 40px); 
  border: solid 3px #111; 
  box-shadow: 0.5rem 0.5rem 0 0 #111; 
  text-align: left; 
}

.inidac-guide--textbox .textleftbox ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.inidac-guide--textbox .textleftbox ul.caution {
  list-style: none;
  padding: 0;
  margin: 0;
}

.inidac-guide--textbox .textleftbox ul.caution > li {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* --- 指南页箭头装饰 --- */
/* 指南页箭头图标 */
.inidac-guide--arrow { 
  display: block;
  margin: clamp(1.25rem, 2vw, 20px) auto clamp(1.875rem, 3vw, 40px); 
  text-align: center; 
  width: clamp(50px, 5vw, 70px); 
  max-width: 70px;
  box-sizing: border-box;
}

.inidac-guide--arrow img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

/* --- 指南页图片展示 --- */
/* 多图片对比容器 */
.inidac-guide--image.multi { 
  position: relative;
  display: block;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow: visible; 
  margin-bottom: clamp(-2.5rem, -3vw, 0);
  min-height: clamp(200px, 40vw, 500px);
}

.inidac-guide--image.multi > .inidac-guide--image { 
  position: absolute;
  display: block;
  box-sizing: border-box;
  overflow: visible;
}

/* 多图片对比：前置图片 */
.inidac-guide--image.multi > .inidac-guide--image.beforeimage { 
  top: 0;
  left: 0;
  width: clamp(45%, 50vw, 55%);
  max-width: 55%;
  z-index: 2;
}

/* 多图片对比：后置图片 */
.inidac-guide--image.multi > .inidac-guide--image.afterimage { 
  bottom: 0;
  right: 0;
  width: clamp(45%, 50vw, 55%);
  max-width: 55%;
  z-index: 1;
}

.inidac-guide--image.multi > .inidac-guide--image img { 
  max-width: 100%; 
  width: 100%; 
  height: auto; 
  display: block; 
}

/* 指南页图片容器 */
.inidac-guide--image { 
  margin: 0 auto; 
  position: relative; 
  text-align: center; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  max-width: 100%; 
  width: 100%; 
  box-sizing: border-box; 
  overflow: hidden; 
  padding: 0; 
}

/* 指南页图片样式 */
.inidac-guide--image img { 
  max-width: calc(100% - 6px); 
  width: auto; 
  height: auto; 
  max-height: none; 
  border: solid #fff 3px; 
  box-shadow: #000 5px 5px 0 0; 
  margin-bottom: clamp(1.25rem, 2vw, 20px); 
  display: block; 
  box-sizing: content-box; 
  object-fit: contain; 
}

/* 无边框图片 */
.inidac-guide--image .noframe img { 
    border: none; 
    box-shadow: none; 
}

/* 前置图片样式 */
.inidac-guide--image.beforeimage { 
  position: relative; 
  margin: clamp(0.625rem, 1vw, 10px); 
}

/* 后置图片样式 */
.inidac-guide--image.afterimage { 
  position: relative; 
  margin: clamp(0.625rem, 1vw, 10px); 
}

/* 左侧对齐的后置图片 */
.inidac-guide--image.left .afterimage { 
  position: relative; 
  left: clamp(-3.125rem, -4vw, -50px); 
}

/* --- 指南页区块和标题 --- */
/* 指南页区块容器 */
section { 
    margin-bottom: clamp(2.5rem, 5vw, 60px); 
}

section.section-gamestart { 
    margin-bottom: clamp(2.5rem, 5vw, 60px); 
}

/* 图片元素 */
.el-img { 
    display: block; 
}

.el-img.noframe { 
    border: none; 
}

/* 开始内容区块 */
#start-content { 
    display: block; 
}

.inidac-guide--textbox.top30 { margin-top: clamp(1.5rem, 3vw, 30px); }
.inidac-guide--image.catch { position: relative; }
.inidac-guide--image.ghost { position: relative; margin-top: 1rem; }
#tips-content dl.brakingdrift { 
  margin-bottom: clamp(1rem, 2vw, 20px); 
}
#tips-content dl.brakingdrift dt { 
  margin-bottom: clamp(0.5rem, 1vw, 10px); 
}
#tips-content dl.brakingdrift dd { 
  text-indent: -1em; 
  padding-left: 1em;
}
#tips-content dl.brakingdrift:last-child { 
  margin-bottom: 0; 
}
#tips-content .cartype { 
  margin-top: clamp(-2.5rem, -3vw, -40px); 
  margin-bottom: clamp(3.125rem, 8vw, 110px); 
  background: rgba(255,255,255,0.7); 
  padding: clamp(1.5rem, 3vw, 30px); 
  border: solid 3px #111; 
  text-align: left; 
  box-shadow: 0.5rem 0.5rem 0 0 #111; 
}
#tips-content .cartype-h1 { 
  text-shadow: -2px -2px 1px #fff, -1px -2px 1px #fff, 0px -2px 1px #fff, 1px -2px 1px #fff, 2px -2px 1px #fff, -2px -1px 2px #fff, -1px -1px 2px #fff, 0px -1px 2px #fff, 1px -1px 2px #fff, 2px -1px 2px #fff, -2px 1px 2px #fff, -1px 1px 2px #fff, 0px 1px 2px #fff, 1px 1px 2px #fff, 2px 2px 1px #fff; 
  font-feature-settings: 'palt'; 
  color: #b4431a; 
  font-weight: bold; 
  transform: skew(-10deg); 
  font-size: clamp(1.2rem, 1.8vw, 1.5rem); 
  font-style: normal; 
  margin-bottom: clamp(0.25rem, 0.8vw, 10px); 
  text-align: center;
}
#tips-content .cartype .inidac-guide--textbox:first-child { 
  margin: 0 auto clamp(2.5rem, 5vw, 60px); 
  width: 100%;
}
#tips-content .cartype .inidac-guide--icon { 
  display: flex;
}
#tips-content .cartype-icon-one { 
  display: flex; 
  align-items: center;
  margin-right: clamp(1.25rem, 3vw, 50px); 
  margin: clamp(1.25rem, 2vw, 20px) clamp(1.25rem, 3vw, 50px) clamp(1.25rem, 2vw, 20px) 0; 
}
#tips-content .cartype-icon-one>dt { 
  margin-right: clamp(1rem, 1.5vw, 20px); 
}
#tips-content .cartype-icon-one>dt .el-img { 
  width: clamp(50px, 6vw, 100px);
}
#tips-content .cartype-icon-one>dd { 
  text-align: left; 
  line-height: 1.4; 
}
#shop-content .inidac-guide--image.tuningstyle-image img { border: none; box-shadow: none; }
#shop-content .inidac-guide--image.carshop01 { 
  width: clamp(100%, 50vw, 650px); 
  justify-content: left; 
}
#shop-content .inidac-guide--image.carshop02 { 
  z-index: 1;
  position: relative;
}
#shop-content .inidac-guide--image.carshop02 img { border: none; box-shadow: none; }
#shop-content .inidac-guide--image.dressupshop01 { 
  width: clamp(100%, 55vw, 730px); 
  justify-content: left; 
}
#shop-content .inidac-guide--image.dressupshop02 { 
  z-index: 1;
  position: relative;
  width: clamp(150px, 20vw, 250px);
}
#shop-content .inidac-guide--image.dressupshop02 img { border: none; box-shadow: none; }
#shop-content .inidac-text .textlink { text-decoration: none; }
#shop-content .inidac-text .textlink:hover { text-decoration: underline; }
#customize-content .avaterimage img { border: none; box-shadow: none; }
#team-content span.red { color: red; }
#team-content .inidac-guide--image { margin: 0 auto; }
#team-content .inidac-guide--image.catch { 
  position: relative; 
  z-index: 1; 
  width: 100%; 
  margin-top: clamp(-3rem, -5vw, -4.5rem); 
}
#team-content .inidac-guide--image.noline img { border: 0; box-shadow: none; }
#team-content .inidac-guide--image.multi { gap: 1em; }
#team-content .page-banner { 
  width: clamp(92%, 40vw, 500px); 
  padding: 0 clamp(0.625rem, 1vw, 1rem); 
  margin: 0 auto clamp(-2.5rem, -3vw, -40px); 
  transform: translateX(clamp(0px, 0.5vw, 5px)); 
}
#team-content .page-banner:hover { filter: brightness(120%); }
#team-content .page-banner + .page-banner { 
  margin-top: clamp(2rem, 4vw, 4rem); 
}
#team-content .inidac-guide--tips { 
  --pc-width: clamp(300px, 60vw, 806px); 
  --section-back-color: rgba(255, 255, 255, 0.5); 
}
#team-content .inidac-nav-link.cardmaker::before { 
  background-color: #c6ff00; 
  box-shadow: inset 0 0 0 2px #c6ff00, inset 0 0 0 4px #111; 
}
#team-content .inidac-guide--textbox { font-style: normal; }
#gamemode-content .top20 { margin-top: clamp(1rem, 2vw, 20px); }
#gamemode-content .top30 { margin-top: clamp(1.5rem, 3vw, 30px); }
#gamemode-content span.red { color: red; }
#gamemode-content .inidac-guide--image.catch { 
  position: absolute; 
  z-index: 1; 
  width: 100%; 
  top: clamp(35%, 6vw, 70%); 
  left: clamp(0px, 1vw, 12px); 
}
#gamemode-content .inidac-guide--image.ghost { 
  z-index: 1;
  position: relative;
}
.inidac-guide--image.smallimage {
  max-width: clamp(100%, 30vw, 30%); 
  flex: 0 0 clamp(100%, 30vw, 30%); 
}

.brakingdrift {
	margin: 1rem 0;
}

.brakingdrift dt {
	font-weight: bold;
	font-size: 1.1em;
	margin-bottom: 0.5rem;
	color: #111;
}

.brakingdrift dd {
	margin-left: 1.5rem;
	margin-bottom: 0.5rem;
	line-height: 1.6;
}

.cartype {
	margin: 2rem 0;
}

.cartype-h1 {
	font-size: 1.3rem;
	font-weight: bold;
	color: #111;
	margin-bottom: 1rem;
	text-align: center;
}

.cartype-icon {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: center;
	gap: 2rem;
	margin: 1rem 0;
}

.cartype-icon-one {
	text-align: center;
	margin: 0;
}

.cartype-icon-one dt {
	margin-bottom: 0.5rem;
}

.cartype-icon-one dt img {
	max-width: 100px;
	height: auto;
}

.cartype-icon-one dd {
	margin-left: 2rem;
	font-size: 0.9rem;
	line-height: 1.4;
	color: #111;
}

/* ===== Modal System (from auth.blade.php and profile.blade.php) ===== */
.modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
}

.modal.show {
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: modalFadeIn 0.3s forwards;
    will-change: opacity;
}

.modal.show .modal-content {
    animation: modalSlideDown 0.3s forwards;
    will-change: transform, opacity;
}

.modal.closing {
    animation: modalFadeOut 0.3s forwards;
}

.modal.closing .modal-content {
    animation: modalSlideUp 0.3s forwards;
}

@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.modal-content {
    background-color: #fff;
    margin: auto;
    padding: 0;
    border: 3px solid #111;
    box-shadow: 0.5rem 0.5rem 0 0 #111;
    width: 90%;
    max-width: 600px;
    max-height: calc(100vh - 4rem);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-content.modal-small {
    max-width: 400px;
}

@keyframes modalSlideDown {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes modalSlideUp {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(-50px);
        opacity: 0;
    }
}

.modal-header {
    padding: 1.5rem;
    background: #f5f5f5;
    border-bottom: 2px solid #111;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.modal-header h2 {
    margin: 0;
    color: #111;
    font-size: 1.5rem;
}

.modal-close {
    color: #aaa;
    font-size: 2rem;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
}

.modal-close:hover,
.modal-close:focus {
    color: #111;
}

.modal-body {
    padding: 2rem;
    color: #111;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

@media screen and (max-width: 768px) {
    .modal-body {
        padding: 1.2rem;
    }
}

.modal-body p {
    color: #111;
    margin: 0;
}

.modal-footer {
    padding: 1.5rem;
    background: #f5f5f5;
    border-top: 2px solid #111;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    flex-shrink: 0;
}


/* ===== Auth Page Styles ===== */
.inidac-form {
    display: none;
    max-width: 500px;
    width: 100%;
    margin: 5rem auto;
    box-sizing: border-box;
    position: relative;
    padding: 0 1rem;
}

.inidac-form.active {
    display: block;
}


.form-group {
    margin-bottom: 1.5rem;
}

.form-group-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: #111;
    font-weight: bold;
    font-size: 1rem;
}

.form-group-row label {
    margin-bottom: 0;
}

.form-group-inline-content {
    display: flex;
    gap: 0;
    align-items: stretch;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"] {
    width: 100%;
    padding: 0.8rem;
    border: 2px solid #111;
    background: #fff;
    color: #111;
    font-size: 1rem;
    box-sizing: border-box;
}

.form-group-inline-content input[type="text"] {
    flex: 1;
    border-right: none;
    border-radius: 0;
}

.form-group input:focus {
    outline: none;
    border-color: #ff6b35;
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.2);
}

.form-group-inline-content input:focus {
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.2);
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: auto;
    margin: 0;
}



.form-links {
    text-align: center;
    margin-top: 1rem;
}

.form-group-row .form-links {
    margin-top: 0;
    text-align: right;
}

.form-links a {
    color: #ff6b35;
    text-decoration: none;
    font-weight: bold;
}

.form-links a:hover {
    text-decoration: underline;
}

.error-message-box {
    text-align: center;
    padding: 2rem 1rem;
}

.error-icon {
    font-size: 4rem;
    color: #ff6b35;
    margin-bottom: 1rem;
    line-height: 1;
}

.error-message-box h3 {
    color: #111;
    font-size: 1.5rem;
    margin: 0 0 1rem 0;
    font-weight: bold;
}

@media screen and (max-width: 768px) {
    .inidac-form {
        padding: 0 0.5rem;
        margin-top: 2rem;
        margin-bottom: 2rem;
    }
}

/* ===== Profile Page Styles ===== */
/* ============================================================
   第十部分：个人资料页（profile）专用样式
   ============================================================ */

/* --- 个人资料页二级导航特殊样式 --- */
/* 个人资料页二级导航容器特殊样式 */
#inidac-nav-2nd.profile {
    z-index: 100;
    display: block !important;
    visibility: visible !important;
}

#inidac-nav-2nd.profile .inidac-nav-2nd-item {
    visibility: visible !important;
    display: block !important;
}

/* 移动端：改为流式布局 */
@media screen and (max-width: 1780px) {
    #inidac-nav-2nd.profile {
        z-index: auto;
    }
}


/* --- 个人资料信息展示 --- */
/* 个人资料信息容器 */
.profile-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* 信息项 */
.info-item {
    display: flex;
    align-items: center;
    padding: 0.8rem;
    background: #f5f5f5;
    border: 2px solid #ddd;
    border-radius: 5px;
}

/* 信息标签 */
.info-label {
    font-weight: bold;
    color: #111;
    min-width: 120px;
    margin-right: 1rem;
}

/* 信息值 */
.info-value {
    color: #333;
    flex: 1;
}

/* --- 个人资料页表格样式 --- */
/* 登录历史和卡片列表容器 */
.login-history,
.cards-list,
.match-list {
    overflow-x: auto;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}

/* 桌面端：表格容器添加最小宽度限制，防止溢出 */
@media screen and (min-width: 1389px) {
    .login-history,
    .cards-list,
    .match-list {
        overflow-x: auto;
        max-width: 100%;
        box-sizing: border-box;
    }
}

.status-badge {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: bold;
    margin-right: 0.5rem;
}

.status-normal {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #4caf50;
}

.status-logined {
    background: #e3f2fd;
    color: #1565c0;
    border: 1px solid #2196f3;
}

.status-locked {
    background: #fff3e0;
    color: #e65100;
    border: 1px solid #ff9800;
}

.status-banned {
    background: #ffebee;
    color: #c62828;
    border: 1px solid #f44336;
}

.empty-state {
    text-align: center;
    padding: 3rem;
    color: #666;
    font-size: 1.1rem;
}

.empty-state p {
    margin: 0;
}

.add-section {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 2px solid #ddd;
}

.add-section-title {
    color: #111;
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
}

.form-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-row .form-group {
    flex: 1;
    margin-bottom: 0;
}

.form-inline {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-inline .form-group {
    flex: 1;
    margin-bottom: 0;
}

.arcade-form,
.machine-form {
    padding: 1.5rem;
    background: #f9f9f9;
    border: 2px solid #ddd;
    border-radius: 5px;
}

.form-group select,
.form-control {
    width: 100%;
    padding: 0.8rem;
    border: 2px solid #111;
    background: #fff;
    color: #111;
    font-size: 1rem;
    box-sizing: border-box;
}

.form-group select:focus {
    outline: none;
    border-color: #ff6b35;
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.2);
}

.form-group input[type="text"],
.form-group input[type="checkbox"] {
    width: 100%;
    padding: 0.8rem;
    border: 2px solid #111;
    background: #fff;
    color: #111;
    font-size: 1rem;
    box-sizing: border-box;
}

.form-group input[type="checkbox"] {
    width: auto;
    margin-right: 0.5rem;
}

.form-group input[type="text"]:focus {
    outline: none;
    border-color: #ff6b35;
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.2);
}

.disabled-text {
    color: #999;
    font-style: italic;
}

.required {
    color: #ff4444;
}

.permission-notice {
    padding: 1.5rem;
    background: #fff3cd;
    border: 2px solid #ffc107;
    border-radius: 5px;
    color: #856404;
    text-align: center;
    margin-top: 1rem;
}

.permission-notice p {
    margin: 0;
    font-weight: bold;
}

@media screen and (max-width: 1387px) {
    .form-row {
        flex-direction: column;
        gap: 0;
    }
    
    .form-row .form-group {
        margin-bottom: 1rem;
    }
    
    /* 移动端操作列按钮样式 - 只针对操作列 */
    /* 操作列：调整布局使按钮垂直排列 */
    .data-table tbody td.operation-cell {
        flex-direction: column;
        align-items: stretch;
    }
    
    
    /* 确保 status-badge 保持 inline-block，不被拉伸 */
    .data-table tbody td .status-badge {
        display: inline-block !important;
        width: auto !important;
        max-width: 100%;
    }
    
    /* 确保其他单元格内容不被拉伸，并保持右对齐 */
    .data-table tbody td:not(.operation-cell):not(:first-child) {
        align-items: center;
        justify-content: flex-end;
    }
    
    .data-table tbody td:not(.operation-cell) > * {
        width: auto;
        max-width: 100%;
    }
    
    
    
    .info-item {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .info-label {
        min-width: auto;
        margin-right: 0;
    }
}

/* 响应式：移动端表单布局调整 */
@media (max-width: 768px) {
    .form-row {
        flex-direction: column;
        gap: 0;
    }
}