/* ================= 全局基础设置 ================= */
body { 
    background-color: #fafafa; 
    -webkit-font-smoothing: antialiased;
    /* 防止手机端页面被撑破产生横向滚动条 */
    overflow-x: hidden; 
}

/* 强制所有图片、视频不溢出 */
img, video, iframe {
    max-width: 100%;
    height: auto;
}

/* ================= 动画特效 ================= */
.fade-in { 
    animation: fadeIn 0.4s ease-out; 
}
@keyframes fadeIn { 
    from { opacity: 0; transform: translateY(10px); } 
    to { opacity: 1; transform: translateY(0); } 
}

/* ================= 细节美化 ================= */
/* 隐藏滚动条但保留滚动功能 */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* 隐藏 details 的原生小三角 */
details summary::-webkit-details-marker { display: none; }

/* 自定义下拉菜单层级 */
.z-dropdown { z-index: 9999; }

/* 提示词文本截断 */
.line-clamp-3 { 
    display: -webkit-box; 
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical; 
    overflow: hidden; 
}

/* ================= 📱 手机端全站强制自适应补丁 ================= */
@media (max-width: 768px) {
    /* 1. 手机端强制大标题缩小 */
    h1 { font-size: 1.8rem !important; }
    
    /* 2. 手机端所有的按钮宽度占满，方便点击 */
    button.btn-mobile-full { 
        width: 100% !important; 
        margin-bottom: 8px; 
    }

    /* 3. 手机端强制所有网格变成单列 (如果你想让手机上也是2列，请去掉这行) */
    .mobile-grid-1 { 
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important; 
    }

    /* 4. 手机端禁止大表格撑破屏幕，必须能左右滑动 */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}