/* 1. 基础重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-tap-highlight-color: transparent;
}
body {
    background-color: #f4f7fb; 
    padding-bottom: 0;
}

/* 最外层包裹容器 */
.page-wrapper {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* 主体内容容器 - 最大宽度 672px */
.container {
    width: 100%;
    max-width: 672px; 
    margin: 0 auto;
    padding: 0;
}

/* 2. 顶部蓝色区域 */
.header {
    background: linear-gradient(180deg, #3fa7f2 0%, #1b85e3 100%); 
    padding: 16px 16px 14px; 
    text-align: center;
    box-shadow: 0 4px 12px rgba(27, 133, 227, 0.18); 
    margin: 0; 
}
.header h1 {
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin: 0 0 10px 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

/* 搜索框表单 */
.search-bar {
    display: flex;
    background: #ffffff;
    border-radius: 30px; 
    padding: 4px;
    width: 100%;
    margin: 0;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12); 
}
.search-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 8px 16px;
    font-size: 14px;
    color: #333333;
    background: transparent;
}
.search-input::placeholder {
    color: #a0a0a0;
}
.search-btn {
    background: linear-gradient(180deg, #3fa7f2 0%, #1b85e3 100%);
    color: #ffffff;
    border: none;
    padding: 0 24px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 20px;
    cursor: pointer;
    transition: opacity 0.2s;
}
.search-btn:hover {
    opacity: 0.92;
}

/* 3. 线路入口底层容器 */
.route-box {
    background-color: #ffffff; 
    border: 1px solid #e2e8f0; 
    padding: 12px; 
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03); 
    margin: 0; 
}

/* 线路入口网格 */
.route-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 10px; 
}
.route-card {
    display: flex;
    align-items: center;
    justify-content: center; 
    background: linear-gradient(180deg, #ffffff 0%, #f4f9ff 100%); 
    border: 1px solid #cbe2f8; 
    border-radius: 30px; 
    padding: 12px 18px; 
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(27, 133, 227, 0.06); 
    transition: all 0.2s ease;
    cursor: pointer;
}
.route-card:active {
    transform: scale(0.98);
    background: linear-gradient(180deg, #eaf3ff 0%, #dceeff 100%);
}
.route-card:hover {
    border-color: #79b5f2;
    background: linear-gradient(180deg, #ffffff 0%, #eaf3ff 100%);
}
.route-num {
    background-color: #007ae5; 
    color: #ffffff;
    font-weight: 800;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; 
    font-size: 13px;
    margin-right: 8px;
    box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.15); 
    flex-shrink: 0;
}
.route-text {
    color: #0069cc; 
    font-size: 16px; 
    font-weight: 700;
    letter-spacing: 0.5px;
    text-align: center;
    white-space: nowrap;
}

/* 4. 网址导航大卡片 */
.white-box {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03); 
    padding: 14px 12px; 
    margin: 0; 
}

.site-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.site-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #2c3e50;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 4px;
    border-radius: 10px;
    background-color: #f8fafc;
    border: 1px solid #edf2f7;
    transition: all 0.2s ease;
}
.site-item:active {
    transform: scale(0.96);
    background-color: #eef5ff;
}
.site-item:hover {
    color: #0069cc;
    background-color: #f0f7ff;
    border-color: #cbe2f8;
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);
}

/* 图标样式与矢量 SVG 背景映射 */
.site-icon {
    width: 26px;
    height: 26px;
    margin-bottom: 6px;
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 独立设计的图标向量 */
.site-item:nth-child(1) .site-icon { /* 天气预报 */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ff9800"><path d="M12 7c-2.76 0-5 2.24-5 5 0 .65.13 1.26.36 1.83C5.12 14.15 3.5 16.27 3.5 18.75 3.5 21.65 5.85 24 8.75 24h9.5c2.9 0 5.25-2.35 5.25-5.25 0-2.48-1.62-4.6-3.86-4.92.23-.57.36-1.18.36-1.83 0-2.76-2.24-5-5-5zm0 2c1.66 0 3 1.34 3 3 0 .28-.05.54-.12.8l-.22.82.78.29c1.4.52 2.31 1.86 2.31 3.34 0 1.79-1.46 3.25-3.25 3.25h-9.5c-1.79 0-3.25-1.46-3.25-3.25 0-1.48.91-2.82 2.31-3.34l.78-.29-.22-.82c-.07-.26-.12-.52-.12-.8 0-1.66 1.34-3 3-3z"/><path d="M12 1v3M4.22 4.22l2.12 2.12M1 12h3M19.78 4.22l-2.12 2.12M23 12h-3" stroke="%23ff9800" stroke-width="2" stroke-linecap="round"/></svg>');
}
.site-item:nth-child(2) .site-icon { /* 快递查询 */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%232196f3"><path d="M20 8l-8-5-8 5v8l8 5 8-5V8zm-8-2.69L16.74 8 12 10.97 7.26 8 12 5.31zM6 10.15l5 3.13v5.41l-5-3.13v-5.41zm12 5.41l-5 3.13v-5.41l5-3.13v5.41z"/></svg>');
}
.site-item:nth-child(3) .site-icon { /* 万年历 */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23e91e63"><path d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V10h14v10zm0-12H5V6h14v2zm-7 5h5v5h-5z"/></svg>');
}
.site-item:nth-child(4) .site-icon { /* 地图导航 */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%234caf50"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>');
}
.site-item:nth-child(5) .site-icon { /* 在线字典 */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239c27b0"><path d="M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 4h5v8l-2.5-1.5L6 12V4zm12 16H6v-1.81c.61-.41 1-1.09 1-1.86A2.67 2.67 0 0 0 4.33 14c-.21 0-.42.03-.63.08V14h14.3v6z"/></svg>');
}
.site-item:nth-child(6) .site-icon { /* 计算器 */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2300bcd4"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 14H7v-2h10v2zm0-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>');
}
.site-item:nth-child(7) .site-icon { /* 单位换算 */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ff5722"><path d="M6.99 11L3 15l3.99 4v-3H14v-2H6.99v-3zM21 9l-3.99-4v3H10v2h7.01v3L21 9z"/></svg>');
}
.site-item:nth-child(8) .site-icon { /* 公交路线 */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%233f51b5"><path d="M12 2c-4.42 0-8 .5-8 4v10c0 1.1.9 2 2 2h1v2c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-2h8v2c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-2h1c1.1 0 2-.9 2-2V6c0-3.5-3.58-4-8-4zm5.5 13c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm-11 0C5.67 15 5 14.33 5 13.5S5.67 12 6.5 12s1.5.67 1.5 1.5S7.33 15 6.5 15zm11.5-5H6V6h12v4z"/></svg>');
}
.site-item:nth-child(9) .site-icon { /* 食谱大全 */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ff7043"><path d="M8.1 13.34l2.83-2.83-6.36-6.36c-.78-.78-2.05-.78-2.83 0-.78.78-.78 2.05 0 2.83l6.36 6.36zm11.31-7.07c-1.17-1.17-3.07-1.17-4.24 0l-1.41 1.41 5.66 5.66 1.41-1.41c1.17-1.17 1.17-3.07 0-4.24zm-8.48 8.49l-5.66-5.66-2.12 2.12 5.66 5.66zM12 15c-2.33 0-4.31 1.46-5.11 3.5h10.22c-.8-2.04-2.78-3.5-5.11-3.5z"/></svg>');
}
.site-item:nth-child(10) .site-icon { /* 健康养生 */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23e53935"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>');
}
.site-item:nth-child(11) .site-icon { /* 在线翻译 */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%231e88e5"><path d="M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75l1.13 3h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"/></svg>');
}
.site-item:nth-child(12) .site-icon { /* 常识百科 */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23fb8c00"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 16h-2v-2h2v2zm1.07-7.75l-.9.92C12.45 11.9 12 12.5 12 14h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H7c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.04-.42 1.99-1.07 2.75z"/></svg>');
}

/* 5. 生活资讯与工具区域 */
.news-box {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
    overflow: hidden;
    margin: 0;
}
.news-header {
    padding: 12px 16px; 
    font-size: 14px;
    font-weight: 700;
    color: #222222;
    border-bottom: 1px solid #edf2f7; 
    background-color: #fafbfc; 
}
.news-item {
    padding: 12px 16px; 
    border-bottom: 1px solid #edf2f7; 
    display: block;
    text-decoration: none;
    transition: background-color 0.15s;
}
.news-item:active {
    background-color: #f0f7ff;
}
.news-item:hover {
    background-color: #fcfdfe;
}
.news-item:last-child {
    border-bottom: none; 
}
.news-title {
    font-size: 14px;
    color: #1a1a1a;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 4px 0; 
}
.news-item:hover .news-title {
    color: #0069cc;
}
.news-time {
    font-size: 11.5px;
    color: #ff9429; 
}

/* 6. 底部 Footer 区域 */
.footer-box {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 18px 12px;
    text-align: center;
    font-size: 12px;
    color: #777777;
    margin: 0;
}
.footer-links {
    margin-bottom: 8px;
}
.footer-links a {
    color: #555555;
    text-decoration: none;
    margin: 0 6px;
    transition: color 0.2s;
}
.footer-links a:hover {
    color: #0069cc;
}
.footer-copy {
    color: #999999;
    line-height: 1.6;
}

/* 移动端端深度自适应适配 (手机端) */
@media (max-width: 480px) {
    .site-grid { 
        grid-template-columns: repeat(3, 1fr); 
        gap: 8px;
    }
    .site-item {
        padding: 8px 2px;
        font-size: 12.5px;
    }
    .site-icon {
        width: 24px;
        height: 24px;
    }
    .route-card {
        padding: 10px 12px;
    }
    .route-text { 
        font-size: 15px; 
    }
    .route-num {
        width: 22px;
        height: 22px;
        font-size: 12px;
    }
    .header h1 { 
        font-size: 20px; 
    }
}