/* 全局样式重置 - 统一浏览器默认样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 页面基础样式 - 设置字体、颜色和背景 */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    background-color: #fff;
}

/* 链接样式 - 去除下划线并继承父元素颜色 */
a {
    text-decoration: none;
    color: inherit;
}

/* 按钮样式 - 设置鼠标指针和字体继承 */
button {
    cursor: pointer;
    font-family: inherit;
}

/* 表单元素样式 - 统一字体继承 */
input,
select,
textarea {
    font-family: inherit;
}

/* 图片图标样式 - 统一图标显示效果 */
.icon-home,
.avatar-icon {
    display: inline-block;
    vertical-align: middle;
}

/* 首页图标样式 */
.icon-home {
    width: 22px;
    height: 22px;
}

/* 用户头像图标样式 */
.avatar-icon {
    width: 20px;
    height: 20px;
}

/* 侧边栏头像图标样式 - 更大的尺寸 */
.sidebar .avatar-icon {
    width: 48px;
    height: 48px;
}

/* 滚动条样式 - Webkit浏览器兼容 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

/* 滚动条轨道样式 */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* 滚动条滑块样式 */
::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

/* 滚动条滑块悬停效果 */
::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* ==================== 响应式设计 ==================== */

/* 平板设备适配 - 最大宽度991.98px */
@media (max-width: 991.98px) {
    body {
        font-size: 13px;
    }
}

/* 手机设备适配 - 最大宽度767.98px */
@media (max-width: 767.98px) {
    body {
        font-size: 12px;
    }
    
    /* 移动设备上隐藏滚动条 */
    ::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }
}

/* 小屏手机设备适配 - 最大宽度575.98px */
@media (max-width: 575.98px) {
    body {
        font-size: 11px;
    }
}