/* 通用重置 */
body {
    margin: 0;
    /* 优化字体栈，优先考虑 Windows 和 Android 常见且美观的字体 */
    font-family:
        /* Android 优先 */
        "Roboto", /* Android 英文和部分中文 (如果ROM支持良好) */
        /* Windows 优先 */
        "Segoe UI", /* Windows 英文 UI 字体 */
        "Microsoft YaHei", /* Windows 中文 (微软雅黑) */
        "Microsoft YaHei UI", /* Windows 中文 UI 优化版 (较新系统) */
        /* macOS / iOS 备选 (如果你的用户群也有这些设备) */
        -apple-system, /* Safari (macOS & iOS) */
        BlinkMacSystemFont, /* Chrome (macOS) */
        /* 更通用的中文字体备选 (部分 Android 或 Linux 可能有) */
        "Noto Sans CJK SC", /* 思源黑体 SC (常见于 Android/Linux) */
        "Source Han Sans CN", /* 思源黑体 CN (同上) */
        "PingFang SC", /* macOS/iOS 中文 */
        "Hiragino Sans GB", /* 旧版 macOS 中文 */
        /* 通用无衬线字体备选 */
        "Helvetica Neue",
        Arial,
        /* 最后的通用后备 */
        sans-serif;
    background-color: #f7f9fc;
    color: #333;
    min-height: 100vh;
    overflow-y: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    /* 优化字体：启用字体平滑 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    text-decoration: none;
    color: inherit;
}

/* 背景 SVG */
body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('pattern-22.svg');
    background-repeat: repeat;
    background-position: center;
    background-size: auto;
    z-index: -1;
    opacity: 0.5;
}

/* 头部 */
header {
    position: relative;
    width: 100%;
    height: 70px;
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    padding-left: 20px;
    box-sizing: border-box;
}

.logo img {
    height: 50px;
    object-fit: contain;
    /* 防止图片被拖动 */
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}

/* 主体部分 - 居中图标导航 */
main {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 25px; /* 稍微增加main的padding，给内容更多呼吸空间 */
    box-sizing: border-box;
}

.icon-navigation {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background-color: rgba(255, 255, 255, 0.85);
    padding: 25px 40px; /* 上下padding也略微增加 */
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    /* 调整宽度以在桌面端更舒适 */
    width: 90%; /* 相对于main的padding区域，提供基础响应性 */
    min-width: 380px; /* 保证一个最小的可读宽度，对小屏幕友好 */
    max-width: 580px; /* 限制最大宽度，避免在非常宽的屏幕上内容区过宽 */
    box-sizing: border-box; /* 确保 padding 和 border 不会影响计算的 width */
}

.icon-item {
    display: flex;
    align-items: flex-start;
    gap: 20px; /* 稍微增加图标和文字容器的间距 */
    transition: transform 0.2s ease-out;
    width: 100%;
    padding: 18px 0; /* 调整每个条目的上下内边距 */
    box-sizing: border-box;
}

.icon-item:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.icon-item:hover {
    transform: translateX(5px);
}

.icon-item img {
    width: 52px; /* 稍微增大图标尺寸 */
    height: 52px; /* 稍微增大图标尺寸 */
    cursor: pointer;
    transition: transform 0.3s ease;
    flex-shrink: 0;
    margin-top: 3px; /* 根据新的字体和图标大小微调，以使其视觉对齐 */
    /* 防止图片被拖动 */
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}

.icon-item img:hover {
    transform: scale(1.15);
    opacity: 0.9;
}

.icon-text-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    /* 防止文本被选中和拖动 */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE10+/Edge */
    user-select: none;         /* Standard */
}

.icon-title-text {
    font-size: 1.2em; /* 增大标题字体大小 */
    font-weight: 500;
    color: #333;
    transition: color 0.2s ease-out;
    line-height: 1.45; /* 相应调整行高 */
}

.icon-item:hover .icon-title-text {
    color: #007bff;
}

.icon-description-text {
    font-size: 0.92em; /* 增大描述字体大小 */
    font-weight: 400;
    color: #777777;
    margin-top: 6px; /* 调整与标题的间距 */
    line-height: 1.55; /* 相应调整行高 */
    word-break: break-word;
}