/* =====================================================
   0. 变量 & Reset
   ===================================================== */
:root{
  --bg-light:#ffffff;          /* 纯白背景 */
  --bg-card:#ffffff;
  --primary:#00A1D6;
  --primary-dark:#0090C5;
  --text-main:#333;
  --text-muted:#7A7A7A;
  --radius:.75rem;
  --shadow:0 4px 12px rgba(0,0,0,.08);
  --transition:.25s ease;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{
  height:100%;
  font-family:'Noto Sans SC',sans-serif;
  background:var(--bg-light);
  color:var(--text-main);
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:var(--primary);transition:var(--transition);}
a:hover{color:var(--primary-dark);}

/* =====================================================
   1. 主栅格
   ===================================================== */
.container{
  max-width:1200px;
  margin-inline:auto;
  padding:2rem 1rem;
  display:grid;
  grid-template-columns:1fr 280px;
  gap:2rem;
}

/* =====================================================
   2. 顶栏 Topbar
   ===================================================== */
.topbar{
  background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.08);
  position:sticky;top:0;z-index:1000;
}
.topbar-wrap{
  max-width:1200px;
  margin:auto;
  padding:.5rem 1rem;
  display:flex;
  align-items:center;
}
.logo{
  font-size:1.8rem;
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
}

/* 导航 + 搜索 */
.top-nav{display:flex;gap:1rem;font-size:.9rem;margin-left:1rem;}
.search{
  flex:1 1 360px;
  max-width:580px;
  display:flex;
  margin:0 1rem;
  border:1px solid #d0d7de;
  border-radius:4px;
  overflow:hidden;
}
.search input{
  flex:1;border:none;outline:none;
  padding:.45rem .6rem;font-size:.9rem;
}
.search button{
  border:none;background:#f6f8fa;
  width:46px;cursor:pointer;transition:.25s;
}
.search button:hover{background:#e9eef2;}

/* 右侧按钮区 */
.user-ops{
  margin-left:auto;
  padding-right:1rem;                /* 离浏览器右 16px */
  display:flex;align-items:center;gap:.75rem;
}
.btn-upload{
  background:var(--primary);color:#fff;
  padding:.45rem .9rem;font-size:.85rem;border-radius:4px;
}
.btn-upload:hover{background:var(--primary-dark);}
.btn-login{font-size:.85rem;color:#666;}
.btn-login:hover{color:var(--primary);}
.avatar span,
.avatar img{
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#eaf5fb;font-size:1.2rem;
}

/* =====================================================
   3. Banner Slider
   ===================================================== */
.banner-slider{
  position:relative;width:100%;aspect-ratio:31/9;
  overflow:hidden;margin-bottom:2.5rem;
}
.banner-slider .slide{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0;transition:opacity .8s;
}
.banner-slider .slide.active{opacity:1;}
.banner-slider .arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  border:none;background:rgba(0,0,0,.35);color:#fff;
  width:44px;height:44px;border-radius:50%;
  font-size:2rem;cursor:pointer;transition:.3s;
}
.banner-slider .arrow:hover{background:rgba(0,0,0,.55);}
.banner-slider .prev{left:1rem;}
.banner-slider .next{right:1rem;}

/* =====================================================
   4. Hero
   ===================================================== */
.hero{
  max-width:1200px;
  margin:0 auto 2rem;
  display:grid;
  grid-template-columns:200px 1fr 240px;
  gap:1.5rem;
  padding:0 1rem;
}
.hero-actions{display:flex;flex-direction:column;gap:1rem;}
.btn-download{
  display:inline-block;width:100%;
  background:var(--primary);color:#fff;
  padding:.75rem 1rem;border-radius:var(--radius);
  font-weight:500;box-shadow:var(--shadow);text-align:center;
}
.btn-download:hover{background:var(--primary-dark);}
.quick-links{display:flex;flex-direction:column;gap:.75rem;}
.quick-links a{
  background:#fff;border:1px solid var(--primary);
  padding:.5rem;border-radius:var(--radius);
  text-align:center;font-size:.9rem;
}
.quick-links a:hover{background:var(--primary);color:#fff;}

.hero-img{
  border:4px solid #fff;border-radius:var(--radius);
  box-shadow:0 6px 16px rgba(0,0,0,.12);
  overflow:hidden;background:#fff;
}
.hero-img img{display:block;width:100%;}

.hero-news{
  list-style:none;display:flex;flex-direction:column;gap:.5rem;
}
.hero-news li a{
  background:#fff;padding:.5rem .75rem;
  border-left:4px solid var(--primary);
  border-radius:var(--radius);
  font-size:.9rem;color:var(--text-muted);
}
.hero-news li a:hover{color:var(--primary-dark);}

/* =====================================================
   5. 资讯区
   ===================================================== */
.news .news-tabs{display:flex;gap:.5rem;margin:2rem 0 1rem;}
.news-tabs button{
  flex:1;background:#fff;border:1px solid var(--primary);
  padding:.5rem;border-radius:var(--radius);
  font-size:.9rem;color:var(--primary);cursor:pointer;
  transition:var(--transition);
}
.news-tabs button:hover,
.news-tabs .active{background:var(--primary);color:#fff;}

.carousel{
  display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.carousel img{border-radius:var(--radius);box-shadow:var(--shadow);}

/* 单条新闻卡 */
.card{
  background:var(--bg-card);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:1rem;margin-top:1.5rem;
  display:grid;grid-template-columns:140px 1fr;gap:1rem;
}
.card header{
  grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;
}
.card header h3{font-size:1.1rem;line-height:1.4;}
.card header time{font-size:.8rem;color:var(--text-muted);}
.card p{font-size:.95rem;color:var(--text-muted);}
.card .more{margin-top:.5rem;font-size:.9rem;}
.card:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.12);}

/* =====================================================
   6. 侧边栏
   ===================================================== */
.sidebar{display:flex;flex-direction:column;gap:1.5rem;}
.side-links{
  display:grid;grid-template-columns:1fr 1fr;gap:.75rem;
}
.side-links a{
  background:#fff;padding:.5rem;border-radius:var(--radius);
  font-size:.85rem;text-align:center;box-shadow:var(--shadow);
}
.rank-list{
  display:block;background:var(--primary);color:#fff;
  padding:.75rem;border-radius:var(--radius);
  text-align:center;font-weight:500;transition:var(--transition);
}
.rank-list:hover{background:var(--primary-dark);}
.ad-space{
  height:640px;width:280px;border-radius:var(--radius);
  background:url("../images/main_right.jpg") top center/cover no-repeat;
  box-shadow:var(--shadow);
}
.social{display:flex;justify-content:space-between;align-items:center;}
.btn-follow{
  background:#fff;border:1px solid var(--primary);color:var(--primary);
  padding:.5rem .75rem;border-radius:var(--radius);
}
.btn-follow:hover{background:var(--primary);color:#fff;}
.media-form{display:flex;gap:.5rem;}
.media-form input{
  flex:1;padding:.5rem .75rem;border:1px solid #ccc;border-radius:var(--radius);
}
.media-form button{
  padding:.5rem .75rem;background:var(--primary);color:#fff;
  border:none;border-radius:var(--radius);cursor:pointer;
}
.media-form button:hover{background:var(--primary-dark);}

/* =====================================================
   7. 页脚
   ===================================================== */
.site-footer{
  background:url("../images/main_foot.jpg") center/cover no-repeat;
  margin-top:3rem;padding:2.5rem 1rem;text-align:center;color:#fff;
}
.site-footer nav{
  display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin:1rem 0;
}
.site-footer nav a{color:#fff;font-size:.9rem;}
.site-footer small{display:block;font-size:.8rem;}
.site-footer img{width:220px;margin-inline:auto;}

/* ---------- 页脚文字改为黑色 ---------- */
.site-footer,
.site-footer nav a,
.site-footer small{
  color:#000;                 /* 正常状态黑色 */
}

/* 链接悬停时仍用主色高亮（可按需修改）*/
.site-footer nav a:hover{
  color:var(--primary);
}


/* =====================================================
   新增：响应式媒体查询（移动端适配）
   ===================================================== */
@media (max-width: 1024px) {
  .topbar-wrap {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .logo {
    flex: 0 0 auto;
  }
  .top-nav {
    order: 3;
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin: 0.5rem 0;
  }
  .search {
    order: 2;
    flex: 1 1 100%;
    margin: 0.5rem 0;
  }
  .user-ops {
    order: 1;
    width: 100%;
    justify-content: flex-end;
    padding-right: 0;
  }
  .banner-slider {
    aspect-ratio: 16/6;
  }
}

@media (max-width: 768px) {
  .container {
    display: block;
    padding: 1.5rem 0.75rem;
  }
  .container .news,
  .container .sidebar {
    width: 100%;
    margin: 0 auto 2rem;
  }
  .hero {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero-actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
  }
  .btn-download,
  .quick-links a {
    width: auto;
    flex: 1 1 45%;
  }
  .hero-img {
    margin: 1rem auto;
    width: 80%;
  }
  .hero-news {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
  }
  .card {
    grid-template-columns: 1fr !important;
  }
  .card header {
    flex-direction: column;
    align-items: flex-start;
  }
  .sidebar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
  }
  .side-links {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }
  .ad-space {
    display: none;
  }
  .site-footer nav {
    flex-direction: column;
    gap: 0.25rem;
  }

  /* —— 按钮修正 —— */
  .hero-actions .btn-download {
    flex: 0 0 auto !important;
    width: auto !important;
    padding: 0.75rem 1.5rem !important;
    font-size: 1rem !important;
    line-height: 1.2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

@media (max-width: 480px) {
  html {
    font-size: 14px;
  }
  .top-nav a,
  .search input,
  .search button {
    font-size: 0.8rem;
  }
  .btn-download,
  .quick-links a {
    font-size: 0.8rem;
    padding: 0.5rem 0.75rem;
  }
  .hero-news li a {
    font-size: 0.8rem;
    padding: 0.4rem 0.6rem;
  }
  .news-tabs button {
    font-size: 0.8rem;
    padding: 0.4rem;
  }
  .card p,
  .card header h3 {
    font-size: 0.85rem;
  }
  .sidebar a {
    font-size: 0.8rem;
    padding: 0.4rem 0.5rem;
  }
  .site-footer nav a {
    font-size: 0.8rem;
  }

  /* —— 小屏再微调按钮 —— */
  .hero-actions .btn-download {
    padding: 0.6rem 1.2rem !important;
    font-size: 0.9rem !important;
  }
}

/* —— 修正：手机端侧栏按钮 —— */
@media (max-width: 768px) {
  /* 让整个 nav 拉满宽度，分两列 */
  .side-links {
    width: 100% !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* 每个按钮自适应两列宽度，内文垂直水平居中 */
  .side-links a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* 适当的内边距 & 字号 */
    padding: 0.6rem !important;
    font-size: 0.9rem !important;

    /* 去掉多余的最小宽度限制 */
    min-width: 0 !important;
  }
}

@media (max-width: 480px) {
  .side-links a {
    /* 更小屏再微调 */
    padding: 0.5rem !important;
    font-size: 0.8rem !important;
  }
}