/* --- 1. 新工具容器 (毛玻璃 + 浅蓝灰背景) --- */
.tools-container {
    width: 100%;
    max-width: 760px; /* 与 .container 保持一致 */
    
    /* 关键：毛玻璃效果 */
    background: rgba(240, 246, 255, 0.85); /* 浅蓝灰色 + 透明 */
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    
    padding: 32px 48px;
    text-align: center;
    margin-top: 30px; /* 与上方容器的间距 */
}

.tools-title {
    font-weight: 600;
    font-size: 1.5rem; /* 24px */
    color: #1a1f36;
    margin-bottom: 24px;
}

/* --- 2. 按钮网格 (横向排列, 自动换行) --- */
.tools-grid {
    display: flex;
    flex-wrap: wrap; /* 核心：自动换行 */
    justify-content: center; /* 居中排列 */
    gap: 12px; /* 按钮间距 */
}

/* --- 3. 反色按钮样式 (白底蓝字) --- */
.tool-button {
    background: #ffffff; /* 干净的白色 */
    color: #3b82f6; /* 使用主色调蓝色 */
    border: 1px solid #e2e8f0; /* 浅灰色边框 */
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 0.95rem;
    font-weight: 600; /* 字体加粗 */
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* 轻微阴影 */
}

.tool-button:hover {
    transform: translateY(-3px); /* 悬停上浮 */
    border-color: #3b82f6; /* 边框变蓝 */
    box-shadow: 0 5px 15px rgba(59, 130, 246, 0.2); /* 蓝色光晕 */
}

/* --- 4. 弹窗样式 (遮罩层) --- */
.tool-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* 半透明黑色背景 */
    backdrop-filter: blur(5px); /* 背景模糊 */
    -webkit-backdrop-filter: blur(5px);
    display: none; /* 默认隐藏 */
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* 当显示时, 渐入 */
.tool-modal-overlay.show {
    display: flex;
    opacity: 1;
}

/* --- 5. 弹窗内容 --- */
.tool-modal-content {
    background: #fff;
    padding: 24px 32px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    text-align: center;
    max-width: 90%;
    width: 360px; /* 弹窗宽度 */
    position: relative;
    
    /* 入场动画 */
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.tool-modal-overlay.show .tool-modal-content {
    transform: scale(1);
}

.tool-modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 2rem;
    color: #aaa;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
}
.tool-modal-close:hover {
    color: #333;
}

/* --- 弹窗标题 (新加) --- */
.tool-modal-title {
    font-size: 1.3rem; /* 标题大一点 */
    font-weight: 600;
    color: #1a1f36;
    margin-bottom: 16px; /* 和图片拉开距离 */
    line-height: 1.4;
}

.tool-modal-image {
    width: 100%;
    max-width: 250px; /* 图片最大宽度 */
    height: auto;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid #eee;
}

#tool-modal-text {
    font-size: 1.1rem;
    color: #1a1f36;
    font-weight: 500;
    line-height: 1.6;
}

/* 响应式调整 */
@media (max-width: 640px) {
    .tools-container {
        padding: 24px;
    }
    .tools-title {
        font-size: 1.25rem;
    }
}

  /* =========================================
   1. 修复：H1大标题 (黑色底 + 白光扫过)
   ========================================= */
h1 {
    font-weight: 800;
    
    /* 关键修正：改回了您原始style.css里的颜色 #1a1f36 */
    /* 效果：深蓝灰文字 -> 扫过一道白光 -> 深蓝灰文字 */
    background: linear-gradient(
        110deg,
        #1a1f36 40%,    /* 左边：原始深蓝灰 */
        #ffffff 50%,    /* 中间：强白光 */
        #1a1f36 60%     /* 右边：原始深蓝灰 */
    );
    
    background-size: 200% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    
    /* 文字透明，透出背景的颜色和白光 */
    color: transparent;
    
    /* 动画：2秒一次循环 */
    animation: superShine 2s linear infinite;
}

/* 定义扫光动画 */
@keyframes superShine {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* --- 域名：强制紫色 + 心跳记忆动画 --- */
.domain-reminder {
    /* 1. 颜色设置 */
    color: #a020f0 !important; /* 强制设定为显眼的紫色 */
    
    /* 2. 关键：必须重置之前的扫光背景，否则紫色不显示 */
    background: none !important; 
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: initial !important;

    /* 3. 字体样式 */
    font-weight: 800; 
    font-size: 1.4rem; 
    margin-bottom: 16px;
    display: inline-block; 
    
    /* 4. 保持心跳动画 */
    animation: heartbeat 1.2s infinite ease-in-out;
}

/* 心跳关键帧 (配合紫色光晕) */
@keyframes heartbeat {
    0% { 
        transform: scale(1); 
        text-shadow: 0 0 0px rgba(160, 32, 240, 0); 
    }
    50% { 
        transform: scale(1.15); 
        /* 紫色呼吸光晕 */
        text-shadow: 0 0 15px rgba(160, 32, 240, 0.6), 0 0 30px rgba(160, 32, 240, 0.2); 
    }
    100% { 
        transform: scale(1); 
        text-shadow: 0 0 0px rgba(160, 32, 240, 0); 
    }
}