/* 全局变量 */
:root {
    /* 基础颜色 */
    /* --primary-color: #2563EB;
    --secondary-color: #3B82F6;
    --accent-color: #60A5FA; */


    --primary-color: #1785BB;
    --secondary-color: #1FA2E2;
    --accent-color: #51B3E4;



    --text-color: #1E293B;
    --white: #ffffff;
    --light-bg: #F8FAFC;
    --dark: #0F172A;
    
    /* 渐变色 */
    --gradient-1: linear-gradient(135deg, #2563EB, #3B82F6);
    --gradient-2: linear-gradient(135deg, #3B82F6, #60A5FA);
    --gradient-3: linear-gradient(135deg, #60A5FA, #2563EB);
    
    /* 玻璃态效果 */
    --glass-bg: rgba(255, 255, 255, 0.9);
    --glass-border: rgba(255, 255, 255, 0.2);
    
    /* 导航栏效果 */
    --navbar-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --navbar-blur: blur(20px);
    --navbar-shadow: 0 4px 30px rgba(37, 99, 235, 0.15);
    --navbar-border: 1px solid rgba(37, 99, 235, 0.1);
    
    /* 通用效果 */
    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --card-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --hover-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* 基础样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background: var(--light-bg);
}

/* 通用动画 */
@keyframes pulse {
    0% {
        transform: translate(30%, -30%) scale(1);
    }
    50% {
        transform: translate(30%, -30%) scale(1.1);
    }
    100% {
        transform: translate(30%, -30%) scale(1);
    }
}

/* 通用组件样式 */
.hot-label {
    background: #ff4444;
    color: white;
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 20px;
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(30%, -30%);
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(255, 68, 68, 0.2);
    animation: pulse 2s infinite;
}

/* 响应式布局基础类 */
@media (max-width: 1200px) {
    .container {
        width: 95%;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .container {
        width: 100%;
        padding: 0 1rem;
    }
}