/* ========== 月度音乐精选系统 - 主样式文件 ========== */
/* 
 * 文件作用：统一导入所有CSS模块
 * 修改说明：
 * - 调整@import顺序会影响样式优先级
 * - base.css必须最先导入
 * - themes.css建议第二个导入，提供CSS变量
 * - 组件样式最后导入，确保能覆盖基础样式
 * 
 * 版本：v1.0.0
 * 更新日期：2025-08-05
 * 作者：音乐精选系统开发团队
 */

/* ========== 1. 基础样式 - 必须最先导入 ========== */
/* 
 * 包含：CSS重置、全局设置、动画关键帧、工具类
 * 修改影响：影响整个网站的基础视觉效果和行为
 */
 @import url('./base.css');

 /* ========== 2. 主题变量 - 为其他文件提供CSS变量 ========== */
 /* 
  * 包含：颜色变量、主题切换、深色模式、高对比度模式
  * 修改影响：影响整体色彩风格和视觉主题
  */
 @import url('./themes.css');
 
 /* ========== 3. 布局样式 - 页面结构 ========== */
 /* 
  * 包含：容器布局、导航、网格系统、响应式布局
  * 修改影响：影响页面结构和响应式表现
  */
 @import url('./layout.css');
 @import url('./tab_layout.css');
 @import url('./react_layout.css');

 
 /* ========== 4. 组件样式 - 具体功能模块 ========== */
 /* 
  * 包含：音频卡片、表单、按钮、播放器、消息提示等
  * 修改影响：影响具体功能模块的外观和交互效果
  */
@import url('./audio_components.css');

@import url('./tab_components.css');

@import url('./components.css');

@import url('./components.css');
 
 /* ========== 5. 自定义覆盖样式 ========== */
 /* 
  * 在这里添加临时的样式覆盖或特殊定制
  * 注意：尽量避免在这里添加样式，应该在对应的模块文件中修改
  */
 
 /* 临时修复或特殊需求的样式可以写在这里 */
 /* 例如：
 .special-override {
     // 特殊样式
 }
 */
 
 /* ========== 版本信息和更新日志 ========== */
 /*
  * v1.0.0 (2025-08-05)
  * - 初始版本，完成基础模块拆分
  * - 实现响应式设计
  * - 添加深色模式支持
  * - 优化无障碍访问
  * 
  * 文件结构说明：
  * ├── base.css (约150行) - 基础样式和重置
  * ├── themes.css (约200行) - 主题和颜色变量  
  * ├── layout.css (约300行) - 布局和响应式
  * ├── components.css (约400行) - 组件样式
  * └── style.css (约50行) - 主入口文件
  * 
  * 总计：约1100行CSS代码，模块化管理
  */
 
 /* ========== 性能优化提示 ========== */
 /*
  * 1. 使用CSS变量提高主题切换性能
  * 2. 合理使用will-change属性优化动画
  * 3. 避免深层嵌套选择器
  * 4. 使用transform和opacity进行动画
  * 5. 合理使用@media查询减少重绘
  */
 
 /* ========== 维护指南 ========== */
 /*
  * 🎨 修改颜色主题：编辑 themes.css
  * 📱 调整响应式布局：编辑 layout.css  
  * 🎵 修改组件样式：编辑 components.css
  * 🔧 添加工具类：编辑 base.css
  * 
  * ⚠️ 注意事项：
  * - 修改变量名需要全局搜索替换
  * - 添加新断点需要在所有文件中同步
  * - 删除样式前确认没有被其他地方使用
  */
 
 /* ========== 浏览器兼容性 ========== */
 /*
  * 支持的浏览器：
  * - Chrome 88+
  * - Firefox 85+  
  * - Safari 14+
  * - Edge 88+
  * 
  * 使用的现代CSS特性：
  * - CSS自定义属性 (CSS Variables)
  * - CSS Grid布局
  * - Flexbox布局
  * - backdrop-filter
  * - prefers-color-scheme
  * - prefers-reduced-motion
  */