/* ---------- Design tokens ---------- */
:root{
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --bg:#f7f8fb;
  --card:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --line:#e5e7eb;
  --brand:#0ea5e9;            /* 顶部栏 & 链接主色（青蓝） */
  --brand-ink:#0b4d63;

  /* 分类色 */
  --c-general:#94a3b8;        /* slate */
  --c-pv:#f59e0b;             /* amber */
  --c-wind:#38bdf8;           /* sky */
  --c-storage:#10b981;        /* emerald */
  --c-charger:#8b5cf6;        /* violet */
  --c-pe:#06b6d4;             /* cyan */
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ---------- Header：标题在左，搜索/语言在右 ---------- */
header{
  position:sticky;
  top:0;
  z-index:10;
  display:flex;                 /* 横向排列 */
  align-items:center;
  gap:12px;
  padding:10px 20px;            /* 顶部留白，避免贴边 */
  background:linear-gradient(180deg,var(--brand) 0%, #119edc 100%);
  color:#fff;
  box-shadow:0 2px 10px rgba(2,132,199,.25);
}
header > h1{
  margin:0;
  font-size:18px;
  font-weight:700;
}
#toolbar{
  margin-left:auto;             /* 关键：推到右侧 */
  display:flex;
  align-items:center;
  gap:10px;
}
#searchBox{
  flex:0 1 360px;
  height:36px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.15);
  color:#fff;
  padding:0 12px;
  outline:none;
  transition:.2s border-color,.2s background;
  white-space:nowrap;
}
#searchBox::placeholder{color:rgba(255,255,255,.85)}
#searchBox:focus{
  border-color:#fff;
  background:rgba(255,255,255,.22);
}

/* 语言切换按钮：修复“English”文字溢出/不居中问题 */
#langToggle{
  display:inline-flex;          /* 垂直水平都居中 */
  align-items:center;
  justify-content:center;
  height:36px;
  min-width:90px;               /* “English”也能放下 */
  padding:0 14px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.25);
  background:#fff;
  color:var(--brand-ink);
  cursor:pointer;
  font-weight:600;
  font-size:14px;
  line-height:1;                /* 避免行高把按钮撑高 */
  white-space:nowrap;           /* 禁止换行成竖排 */
}
#langToggle:hover{filter:brightness(0.97)}

/* ---------- Layout ---------- */
#newsContainer,
#pagination,
#pagination-bottom{
  width:min(980px, calc(100% - 24px));
  margin:0 auto;
}
#pagination,
#pagination-bottom{padding:14px 0 4px}

/* ---------- Pagination （顶部/底部同款） ---------- */
#pagination,
#pagination-bottom{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
#pagination button,
#pagination-bottom button,
#pagination a,
#pagination-bottom a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:76px;
  height:34px;
  padding:0 12px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  cursor:pointer;
  text-decoration:none;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
  transition:.2s transform,.2s box-shadow,.2s background;
  line-height:1; /* 对齐按钮文本 */
}
#pagination button:hover:not(:disabled),
#pagination-bottom button:hover:not(:disabled),
#pagination a:hover,
#pagination-bottom a:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(15,23,42,.08);
  background:#fafafa;
}
#pagination button:disabled,
#pagination-bottom button:disabled{
  cursor:not-allowed;
  opacity:.45;
  background:#fff;
}
#pagination .page-info,
#pagination-bottom .page-info{
  font-size:13px;
  color:var(--muted);
  padding:0 6px;
}

/* ---------- News cards ---------- */
.news-post{
  background:var(--card);
  border:1px solid var(--line);
  border-left:6px solid var(--c-general); /* 默认 General 左色条 */
  border-radius:14px;
  padding:14px 16px 12px;
  margin:16px auto;
  box-shadow:0 6px 18px rgba(15,23,42,.04);
  transition:.25s box-shadow,.25s transform,.25s border-color;
}
.news-post:hover{
  box-shadow:0 12px 28px rgba(15,23,42,.09);
  transform:translateY(-1px);
}

/* 分类色条 */
.news-post[data-category="PV"]{ border-left-color:var(--c-pv) }
.news-post[data-category="Wind"]{ border-left-color:var(--c-wind) }
.news-post[data-category="Storage"]{ border-left-color:var(--c-storage) }
.news-post[data-category="Charger"]{ border-left-color:var(--c-charger) }
.news-post[data-category="PowerElectronics"]{ border-left-color:var(--c-pe) }

/* 标题与链接 */
.news-post h3{
  margin:0 0 8px;
  font-size:16px;
  line-height:1.45;
  font-weight:700;
}
.news-post .news-link{
  color:#0f172a;
  text-decoration:none;
  border-bottom:1px dashed transparent;
  transition:.2s color,.2s border-color;
}
.news-post .news-link:hover{
  color:var(--brand-ink);
  border-color:var(--brand-ink);
}
/* ✅ 已读状态（依赖浏览器历史） */
.news-post .news-link:visited{
  color:#6b7280;               /* 变灰，表示看过 */
}
.news-post .news-link:visited:hover{
  color:var(--brand-ink);      /* 悬停仍高亮 */
}

/* 元信息（来源 / 时间）——来源不再加粗 */
.news-post .meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  font-size:12px;
  color:var(--muted);
  margin:0 0 10px;
}
.news-post .meta .source{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:2px 8px;
  border-radius:999px;
  background:#f1f5f9;
  color:#334155;
  font-weight:400;               /* 改为普通字重 */
  border:1px solid var(--line);
}

/* 正文与摘要 */
.news-post p{
  margin:0 0 10px;
  line-height:1.6;
  color:#111827;
  font-size:14px;
}
.news-post .preview{
  color:#334155;
}
.news-post .summary{
  margin-top:6px;
  padding:10px 12px;
  border-radius:10px;
  border:1px dashed #dbe3ea;
  background:#f8fafc;
}
.news-post[data-category="PV"] .summary{ border-color:color-mix(in srgb,var(--c-pv),#ffffff 65%) }
.news-post[data-category="Wind"] .summary{ border-color:color-mix(in srgb,var(--c-wind),#ffffff 65%) }
.news-post[data-category="Storage"] .summary{ border-color:color-mix(in srgb,var(--c-storage),#ffffff 65%) }
.news-post[data-category="Charger"] .summary{ border-color:color-mix(in srgb,var(--c-charger),#ffffff 65%) }
.news-post[data-category="PowerElectronics"] .summary{ border-color:color-mix(in srgb,var(--c-pe),#ffffff 65%) }

/* 标签 */
.news-post .tags{
  display:inline-block;
  margin-top:6px;
  padding:4px 8px;
  border-radius:999px;
  font-size:12px;
  color:#0f172a;
  border:1px solid var(--line);
  background:#f1f5f9;
}

/* ---------- Footer ---------- */
footer{
  width:min(980px, calc(100% - 24px));
  margin:24px auto 60px;        /* 底部更多空间，图标不再贴边 */
  padding-bottom:40px;
  color:var(--muted);
  font-size:12px;
  text-align:center;
}

/* ---------- Mobile (tablet & small phones) ---------- */
@media (max-width:768px){
  header{ flex-wrap:wrap }      /* 小屏恢复换行 */
  #toolbar{
    margin-left:0;
    width:100%;
    padding-top:8px;
    justify-content:flex-start;
  }
  #searchBox{ flex:1 1 auto; }
  #langToggle{
    height:34px;
    min-width:78px;
    font-size:13px;
  }
  #newsContainer, #pagination, #pagination-bottom, footer{ width:calc(100% - 16px) }
  .news-post{ padding:12px 12px 10px; margin:12px auto }
  .news-post h3{ font-size:15px }
  .news-post p{ font-size:13.5px }
}

/* ---------- Phone tweaks (narrow phones) ---------- */
@media (max-width:430px){
  /* 顶部/底部安全区（iPhone 刘海/底栏） */
  header{
    padding-top: calc(10px + env(safe-area-inset-top));
    padding-bottom: 10px;
  }

  #toolbar{ gap:8px; width:100%; }
  #searchBox{
    flex:1 1 auto;
    min-width:0;              /* 允许在 Safari 收缩 */
    height:34px;
    font-size:14px;
    padding:0 10px;
  }
  #langToggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:34px;
    min-width:78px;
    padding:0 10px;
    font-size:13px;
    line-height:1;
    white-space:nowrap;
  }

  #pagination,
  #pagination-bottom{
    padding:10px 0 2px;
    gap:8px;
  }
  #pagination button,
  #pagination-bottom button,
  #pagination a,
  #pagination-bottom a{
    min-width:70px;
    height:32px;
    padding:0 10px;
    border-radius:9px;
    font-size:13px;
  }
  #pagination .page-info,
  #pagination-bottom .page-info{ font-size:12px }

  #newsContainer{ width:calc(100% - 16px) }
  .news-post{
    margin:12px auto;
    padding:12px 12px 10px;
    border-radius:12px;
  }
  .news-post h3{ font-size:15px; line-height:1.45 }
  .news-post p{ font-size:13.5px }

  /* 防止长单词/URL 造成横向滚动 */
  .news-post p,
  .news-post .news-link{
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  /* 页脚不贴边，预留底部安全区 */
  footer{
    width:calc(100% - 16px);
    margin:20px auto 64px;
    padding-bottom:calc(40px + env(safe-area-inset-bottom));
  }
}

.share-buttons {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  font-size: 18px;
}
.share-buttons a {
  color: var(--muted);
  transition: color 0.2s;
}
.share-buttons a:hover {
  color: var(--brand-ink);
}
/* Sponsor 卡轻量标识，保持与普通卡一致的外观 */
.news-post.sponsor[data-sponsor="true"] { border-left-color: var(--c-general); }
.news-post .sponsor-badge {
  background: #f8fafc;
  color: #334155;
  border: 1px solid var(--line);
}
.news-post.sponsor .sponsor-img {
  display:block;
  width:100%;
  max-height:180px;
  object-fit:cover;
  border-radius:10px;
  border:1px solid var(--line);
  margin:8px 0 6px;
}
/* Sponsor 卡：与普通卡统一但更“原生” */
.news-post.sponsor .news-link{
  color:#0f172a;                 /* 普通标题色 */
  text-decoration:none;
  border-bottom:0;               /* 去掉虚线下划线 */
}
.news-post.sponsor .news-link:hover{
  color:var(--brand-ink);
  border-bottom:0;
}
/* 图片样式与卡体一致；图片加载失败时不变形 */
.news-post.sponsor .sponsor-img{
  display:block;
  width:100%;
  max-height:180px;
  object-fit:cover;
  border-radius:10px;
  border:1px solid var(--line);
  margin:8px 0 6px;
}

/* ✅ Sponsor 标签与其它分类标签一致（用 .tags） */
.news-post.sponsor .tags{
  display:inline-block;
  margin-top:6px;
  padding:4px 8px;
  border-radius:999px;
  font-size:12px;
  color:#0f172a;
  border:1px solid var(--line);
  background:#f1f5f9;
}
/* Sponsor card tweaks */
.news-post.sponsor .news-link{
  color:#0f172a;
  text-decoration:none;
  border-bottom:0;
}
.news-post.sponsor .news-link:hover{
  color:var(--brand-ink);
  border-bottom:0;
}
.news-post.sponsor .sponsor-img{
  display:block;
  width:100%;
  max-height:180px;
  object-fit:cover;
  border-radius:10px;
  border:1px solid var(--line);
  margin:8px 0 6px;
}
/* #Sponsor 标签与其它分类标签一致 */
.news-post.sponsor .tags{
  display:inline-block;
  margin-top:6px;
  padding:4px 8px;
  border-radius:999px;
  font-size:12px;
  color:#0f172a;
  border:1px solid var(--line);
  background:#f1f5f9;
}
/* Sponsor card should look exactly like a news card */
.news-post.sponsor { /* 继承 .news-post 的圆角/阴影/边距即可 */ }

.news-post.sponsor h3 {
  margin: 0;
}

.news-post.sponsor h3 .news-link {
  pointer-events: none;
  color: inherit;
  text-decoration: none;
}

.news-post.sponsor .meta .source-badge {
  opacity: 0.85;
  font-weight: 600;
}

.news-post.sponsor .summary {
  padding: 0; /* 给广告更多可用空间 */
}

.news-post.sponsor .summary > ins.adsbygoogle {
  display: inline-block; /* 兜底，确保与 JS 固定像素配合 */
}