/* =========================================
   0. 全局变量配置 (方便一键换色)
   ========================================= */
:root {
    /* 主题色：辉光橙 */
    --theme-color: #ff9800;
    /* 玻璃背景色：深空黑灰 */
    --glass-bg: rgba(20, 20, 30, 0.65);
    --glass-bg-hover: rgba(30, 30, 45, 0.85);
    /* 缓动曲线：带有弹性的机械感 */
    --transition-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* =========================================
   1. 全局基础设定 - 科技感基底
   ========================================= */
body {
    /* 使用 rem 单位更适配不同分辨率 */
    font-size: 18px !important; 
    /* 推荐加入 JetBrains Mono 或 Fira Code，更有黑客风格 */
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace, sans-serif !important;
    /* 增加字间距，提升科技感的排版张力 */
    letter-spacing: 0.5px !important;
    background-color: #0a0a0f !important; /* 确保背景足够黑，衬托发光 */
}

/* =========================================
   2. 分组标题 - 霓虹灯管效果
   ========================================= */
.group-title {
    font-size: 1.8rem !important; /* 稍微克制一点，保持精致 */
    font-weight: 800 !important;
    color: var(--theme-color) !important;
    text-transform: uppercase; /* 强制大写，更有威慑力 */
    
    /* 多层文字阴影，制造真实的辉光漫射 */
    text-shadow: 
        0 0 5px rgba(255, 152, 0, 0.4),
        0 0 15px rgba(255, 152, 0, 0.6),
        0 0 30px rgba(255, 152, 0, 0.2) !important;
        
    margin-bottom: 1.2rem !important;
    border-bottom: 2px solid rgba(255, 152, 0, 0.15) !important;
    padding-bottom: 8px;
    display: inline-block; /* 让下划线跟随文字长度 */
}

/* =========================================
   3. 服务卡片 - 核心悬浮舱
   ========================================= */
.services .service {
    background: var(--glass-bg) !important;
    /* 磨砂玻璃效果，增加模糊半径 */
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    
    border: 1px solid rgba(255, 255, 255, 0.08); /* 默认边框更隐蔽 */
    border-radius: 12px !important; /* 更圆润一点 */
    
    /* 性能优化：告知浏览器即将发生变化 */
    will-change: transform, box-shadow;
    transition: all 0.4s var(--transition-bounce) !important; 
    
    overflow: hidden; /* 防止光晕溢出 */
}

/* --- 鼠标悬停动效 --- */
/* 仅在支持悬停的设备(电脑)上启用，防止手机误触 */
@media (hover: hover) {
    .services .service:hover {
        /* 放大并上浮 */
        transform: translateY(-6px) scale(1.03) !important; 
        background: var(--glass-bg-hover) !important;
        border-color: var(--theme-color) !important;
        
        /* 复合阴影：一层模拟距离，一层模拟发光 */
        box-shadow: 
            0 15px 35px -10px rgba(0, 0, 0, 0.8),
            0 0 20px -5px rgba(255, 152, 0, 0.4) !important;
            
        z-index: 100;
    }
}

/* 卡片内容优化 */
.service-name {
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin-bottom: 0.25rem !important;
}

.service-description {
    font-size: 0.9rem !important;
    color: rgba(255, 255, 255, 0.6) !important; /* 降低对比度，突出标题 */
    line-height: 1.4;
}

/* 图标发光增强 */
.service-icon img {
    width: 55px !important;
    height: 55px !important;
    transition: filter 0.3s ease;
    /* 默认轻微发光 */
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.2)); 
}

.service:hover .service-icon img {
    /* 悬停时图标高亮 */
    filter: drop-shadow(0 0 8px var(--theme-color)) !important;
}

/* =========================================
   4. 书签栏 - 胶囊按钮风格
   ========================================= */
.bookmark {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid transparent;
    padding: 12px 15px !important;
    border-radius: 8px;
    transition: all 0.3s ease !important;
}

.bookmark:hover {
    background: rgba(255, 152, 0, 0.15) !important;
    border-color: rgba(255, 152, 0, 0.3);
    transform: translateY(-2px); /* 向上动比向右动更自然 */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.bookmark-text {
    font-size: 1.1rem !important; /* 不要过大，保持精致 */
    font-weight: 600 !important;
    color: #eee;
}

/* =========================================
   5. 搜索栏 - 赛博控制台
   ========================================= */
.search-bar-input {
    height: 54px !important;
    font-size: 1.3rem !important;
    font-family: inherit !important; /* 继承全局等宽字体 */
    
    background: rgba(0, 0, 0, 0.4) !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    color: var(--theme-color) !important;
    
    padding-left: 20px !important;
    backdrop-filter: blur(5px);
    transition: all 0.3s ease !important;
}

.search-bar-input::placeholder {
    color: rgba(255, 255, 255, 0.2);
    font-size: 1rem;
    letter-spacing: 2px;
}

.search-bar-input:focus {
    background: rgba(0, 0, 0, 0.7) !important;
    border-color: var(--theme-color) !important;
    /* 聚焦时不仅发光，输入框宽度略微增加或高亮增强 */
    box-shadow: 
        0 0 0 4px rgba(255, 152, 0, 0.1),
        0 0 20px rgba(255, 152, 0, 0.2) !important;
    outline: none;
}