/* 全局重置样式 */
* { margin:0; padding:0; box-sizing:border-box; }
html { font-size:14px; }
body { font-family:"Microsoft YaHei",Arial,sans-serif; color:#333; background:#F5F5F5; line-height:1.6;box-shadow: 2px 0px 8px 1px rgb(0 0 0 / 50%);margin: 5px auto;max-width: 1200px; }
a { text-decoration:none; color:#333; }
ul { list-style:none; }
/* 头部样式 */
.header { height:50px; color:#fff; box-shadow:0 1px 3px rgba(0,0,0,0.1); position:relative; }
.header .logo { float:left; padding-left:15px; line-height:50px; font-size:18px; font-weight:bold; }
.header .logo .logo-link { color:#fff; }
/* PC端导航样式 */
.header .desktop-nav { float:right; padding-right:15px; }
.header .desktop-nav li { float:left; margin-left:20px; line-height:50px; }
.header .desktop-nav li a { color:#fff; padding:0 8px; transition:all 0.3s; }
.header .desktop-nav li a:hover, .header .desktop-nav li a.active { color:#FF9800; }
/* 手机端导航样式 */
.header .mobile-nav { display:none; position:absolute; top:50px; left:0; right:0; padding:10px 0; box-shadow:0 2px 5px rgba(0,0,0,0.2); }
.header .mobile-nav li { float:none; line-height:40px; text-align:center; border-bottom:1px solid rgba(255,255,255,0.1); }
.header .mobile-nav li:last-child { border-bottom:none; }
.header .mobile-nav li a { display:block; color:#fff; padding:0; transition:all 0.3s; }
.header .mobile-nav li a:hover, .header .mobile-nav li a.active { color:#FF9800; background:rgba(255,255,255,0.1); }
/* 移动端菜单按钮 */
.header .menu-btn { display:none; float:right; padding:12px 15px; font-size:20px; cursor:pointer; }
/* 底部样式 */
.footer { color:#999; padding:15px 20px; text-align:center; }
.footer .footer-toggle { display:none; background:#444; color:#fff; border:none; padding:6px 12px; font-size:12px; border-radius:3px; cursor:pointer; margin-bottom:8px; }
.footer .links { margin-bottom:8px; line-height:1.5; }
.footer .links a { color:#999; margin:0 8px; font-size:12px; transition:all 0.3s; display:inline-block !important; float:none !important; clear:none !important; }
.footer .links span { color:#666; margin:0 6px; display:inline-block !important; float:none !important; clear:none !important; }
.footer .links a:hover { color:#fff; }
.footer .copyright { font-size:11px; }
/* 页面容器 */
.container { width:1200px; margin:10px auto; overflow:hidden; }
/* 左侧导航 */
.sidebar { width:180px; float:left; background:#fff; border:1px solid #E0E0E0; border-radius:3px; padding:10px; }
.sidebar .title { font-size:14px; font-weight:bold; color:#1E88E5; padding-bottom:6px; border-bottom:2px solid #1E88E5; margin-bottom:10px; }
.sidebar .menu li { margin-bottom:3px; }
.sidebar .menu li a { display:block; padding:6px 10px; color:#666; border-radius:3px; font-size:13px; transition:all 0.3s; }
.sidebar .menu li a:hover, .sidebar .menu li a.active { background:#1E88E5; color:#fff; }
/* 右侧内容区 */
.main-content { width:990px; float:right; background:#fff; border:1px solid #E0E0E0; border-radius:3px; padding:15px; }
.main-content .page-title { font-size:18px; font-weight:bold; color:#333; padding-bottom:8px; border-bottom:1px solid #E0E0E0; margin-bottom:12px; }
.main-content .section { margin-bottom:15px; }
.main-content .section h3 { font-size:14px; color:#1E88E5; margin-bottom:8px; padding-left:8px; border-left:3px solid #1E88E5; }
.main-content .section p { color:#666; margin-bottom:6px; text-indent:2em; font-size:13px; }
/* 按钮样式 */
.btn { display:inline-block; padding:6px 18px; border-radius:3px; font-size:13px; font-weight:bold; text-align:center; cursor:pointer; transition:all 0.3s; border:none; }
.btn-primary { background:#1E88E5; color:#fff; }
.btn-primary:hover { background:#1565C0; }
.btn-warning { background:#FF9800; color:#fff; }
.btn-warning:hover { background:#F57C00; }
/* ========== 响应式布局 - 平板设备 (768px - 1220px) ========== */
@media (max-width:1220px) {
    .container { width:98%; margin:8px auto; }
    .sidebar { width:160px; padding:8px; }
    .sidebar .title { font-size:13px; padding-bottom:5px; margin-bottom:8px; }
    .sidebar .menu li a { padding:5px 8px; font-size:12px; }
    .main-content { width:calc(100% - 180px); padding:12px; }
    .main-content .page-title { font-size:16px; padding-bottom:6px; margin-bottom:10px; }
    .main-content .section { margin-bottom:12px; }
    .main-content .section h3 { font-size:13px; margin-bottom:6px; padding-left:6px; }
    .main-content .section p { font-size:12px; margin-bottom:5px; }
    .btn { padding:5px 15px; font-size:12px; }
}
/* ========== 响应式布局 - 手机设备 (≤768px) ========== */
@media (max-width:768px) {
    html { font-size:13px; }
    .header { height:45px; }
    .header .logo { padding-left:12px; line-height:45px; font-size:16px; }
    .header .nav { display:none; position:absolute; top:45px; left:0; right:0; padding:10px 0; box-shadow:0 2px 5px rgba(0,0,0,0.2); }
    .header .nav li { float:none; margin-left:0; line-height:40px; text-align:center; border-bottom:1px solid rgba(255,255,255,0.1); }
    .header .nav li:last-child { border-bottom:none; }
    .header .nav li a { display:block; padding:0; }
    .header .menu-btn { display:block; line-height:45px; padding:0 15px; }
    .footer { padding:12px 15px; }
    .footer .links { display:flex; flex-direction:row; justify-content:center; align-items:center; gap:4px; }
    .footer .links a { margin:0 4px; font-size:11px; }
    .footer .links span { display:inline-block; margin:0 4px; }
    .footer .copyright { font-size:10px; }
    .container { width:96%; margin:6px auto; }
    .sidebar { width:100%; float:none; margin-bottom:8px; padding:8px; }
    .sidebar .title { display:none; }
    .sidebar .menu { overflow:hidden; }
    .sidebar .menu li { float:left; margin-bottom:0; margin-right:5px; }
    .sidebar .menu li a { padding:5px 10px; font-size:12px; white-space:nowrap; }
    .main-content { width:100%; float:none; padding:10px; }
    .main-content .page-title { font-size:15px; padding-bottom:5px; margin-bottom:8px; }
    .main-content .section { margin-bottom:10px; }
    .main-content .section h3 { font-size:13px; margin-bottom:5px; padding-left:5px; }
    .main-content .section p { font-size:12px; margin-bottom:4px; line-height:1.5; }
    .btn { padding:8px 20px; font-size:13px; min-width:80px; }
    .main-content .section p { text-indent:0; }
}
/* ========== 响应式布局 - 小屏手机 (≤480px) ========== */
@media (max-width:480px) {
    .header { height:40px; }
    .header .logo { padding-left:10px; line-height:40px; font-size:14px; }
    .header .nav { top:40px; }
    .header .nav li { line-height:36px; }
    .header .menu-btn { line-height:40px; font-size:18px; }
    .footer { padding:10px; }
    .footer .links { display:flex; flex-direction:row; justify-content:center; align-items:center; gap:3px; margin-bottom:5px; }
    .footer .links a { margin:0 3px; font-size:11px; }
    .footer .links span { display:inline-block; margin:0 3px; }
    .container { width:98%; margin:4px auto; }
    .sidebar { padding:5px; }
    .sidebar .menu li { margin-right:3px; }
    .sidebar .menu li a { padding:4px 8px; font-size:11px; }
    .main-content { padding:8px; }
    .main-content .page-title { font-size:14px; }
    .main-content .section h3 { font-size:12px; }
    .main-content .section p { font-size:11px; }
    .btn { padding:7px 16px; font-size:12px; margin-bottom:5px; }
}