/* 首页专用样式 */

:root{
  --bg-primary:#ffffff;
  --surface-color:#ffffff;
  --text-primary:#2b2f36;
  --text-secondary:#7a828f;
  --border-color:#e6e8eb;
  --accent-color:#1a73e8;

  --card-bg: var(--surface-color);
  --card-border: var(--border-color);
}
.dark-theme{
  --bg-primary:#0f1115;
  --surface-color:#16181d;
  --text-primary:#e3e5e9;
  --text-secondary:#9aa0a6;
  --border-color:#2b3138;
  --accent-color:#8ab4f8;

  --card-bg: var(--surface-color);
  --card-border: var(--border-color);
}

/* 顶部 Chat 输入区 */
.google-search-container{padding:40px 0 40px;background:#0f111500;}

/* —— 口号 —— */
.hero-slogan{max-width:860px;margin:0 auto 40px;text-align:center;padding:0 12px;}
.hero-slogan .slogan-text{font-size:28px;line-height:1.35;font-weight:700;color:var(--text-primary);letter-spacing:.5px;word-break:keep-all;white-space:nowrap;}
.hero-slogan .slogan-fixed{margin-right:.25em;}
.hero-slogan .slogan-typed{color:var(--accent-color);padding-right:0;}
@media (max-width:768px){
  .hero-slogan .slogan-text{font-size:22px;white-space:normal;}
}

.search-card{
  --btn-size: 40px;
  --btn-gap: 16px;
  max-width: 800px; margin:0 auto; position:relative;
  border-radius:28px; border:1px solid var(--border-color);
  background:var(--surface-color);
  box-shadow:0 10px 24px rgba(17,17,26,.06);
  padding:20px calc(var(--btn-size) + var(--btn-gap) + 18px) 16px 20px;
  transition: box-shadow .25s, border-color .25s, background .25s;
}
.search-card:focus-within{ border-color:var(--accent-color); box-shadow:0 12px 36px rgba(26,115,232,.18); }

.search-card .card-submit{
  position:absolute; right:var(--btn-gap); bottom:14px;
  width:var(--btn-size); height:var(--btn-size); border-radius:50%;
  background:#4285f4; color:#fff; border:0; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:transform .15s, box-shadow .2s, background .2s;
}
.search-card .card-submit:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(66,133,244,.35); }
.search-card .card-submit .icon-arrow{ width:22px; height:22px; display:block; }

.search-card .search-input{
  width:100%; min-height:96px; max-height:240px; overflow-y:auto;
  background:transparent; border:0; outline:none; resize:none;
  color:var(--text-primary); font-size:18px; line-height:1.6; padding:0;
  white-space:pre-wrap; word-break:break-word;
}
.search-card .search-input::placeholder{ color:var(--text-secondary); }

/* ====== 关键修正：容器与 .container 完全一致（左右 15px，分段宽） ====== */
.cards-section{ padding-top:16px; }
.cards-container{
  margin-left:auto;
  margin-right:auto;
  padding-left:15px;
  padding-right:15px;
  width:100%;
  box-sizing:border-box;
}
@media (min-width:1200px){ .cards-container{ width:1170px; } }
@media (min-width:992px) and (max-width:1199px){ .cards-container{ width:970px; } }
@media (min-width:768px) and (max-width:991px){ .cards-container{ width:750px; } }
/* <768px 时宽度自适应，保留 15px 内边距 */

/* 标题行 */
.section-header{ display:flex; align-items:center; justify-content:space-between; margin:8px 0 12px; }
.section-header h4{ margin:0; color:var(--text-primary); font-weight:600; }
.section-header a.more{ color:var(--accent-color); text-decoration:none; }
.section-header a.more:hover{ text-decoration:underline; }

/* 网格 */
.cards-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap:16px; }

/* 卡片样式 */
.mcp-card{
  display:block; text-decoration:none; color:var(--text-primary);
  background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:16px; padding:14px 14px 12px;
  box-shadow:0 6px 14px rgba(17,17,26,.06);
  transition:none;
}
.mcp-card:hover,.mcp-card:active{
  transform:none;
  border-color:var(--card-border);
  box-shadow:0 6px 14px rgba(17,17,26,.06);
}
.mcp-card:focus,.mcp-card:focus-visible{
  outline:none !important;
  border-color:var(--card-border) !important;
  box-shadow:0 6px 14px rgba(17,17,26,.06) !important;
}

.mcp-card .card-head{ display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.mcp-card .card-logo{
  width:40px; height:40px; border-radius:10px; object-fit:cover;
  background:#fff; border:1px solid rgba(0,0,0,.05);
}
.dark-theme .mcp-card .card-logo{ background:#0b0c0f; border-color:#222; }
.mcp-card .card-title{
  font-size:18px; font-weight:600; margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  color: var(--text-primary);
}
.mcp-card .card-desc{
  margin-top:4px; font-size:13px; color:var(--text-secondary);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

.mcp-card .tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }

/* 修改卡片标签样式为无边线面性 */
.mcp-card .tag-chip{
  font-size:12px; line-height:1; padding:4px 8px; border-radius:999px;
  border:none; /* 移除边框 */
  margin-right: 6px; margin-bottom: 4px; display:inline-block;
}

/* 亮色主题下的标签背景色调整（稍微加深以增强可读性） */
.mcp-card .tag-chip.main { background:#e8f5e8; color:#2e7d32; }
.mcp-card .tag-chip.certification { background:#e3f2fd; color:#1976d2; }
.mcp-card .tag-chip.position { background:#fce4ec; color:#c2185b; }
.mcp-card .tag-chip.language { background:#fff3e0; color:#f57c00; }

/* 暗色主题下的标签背景色调整（稍微提亮以增强可读性） */
.dark-theme .mcp-card .tag-chip.main { background:rgba(76,175,80,.25); color:#81c784; }
.dark-theme .mcp-card .tag-chip.certification { background:rgba(33,150,243,.25); color:#64b5f6; }
.dark-theme .mcp-card .tag-chip.position { background:rgba(233,30,99,.25); color:#f06292; }
.dark-theme .mcp-card .tag-chip.language { background:rgba(255,152,0,.25); color:#ffb74d; }

/* 文章标签样式 - 循环颜色（无边线） */
.mcp-card .tag-chip.article-tag-0 { background:#e1f5fe; color:#0277bd; }
.mcp-card .tag-chip.article-tag-1 { background:#f3e5f5; color:#7b1fa2; }
.mcp-card .tag-chip.article-tag-2 { background:#e8f5e8; color:#388e3c; }

.dark-theme .mcp-card .tag-chip.article-tag-0 { background:rgba(41,182,246,.25); color:#64b5f6; }
.dark-theme .mcp-card .tag-chip.article-tag-1 { background:rgba(171,71,188,.25); color:#ba68c8; }
.dark-theme .mcp-card .tag-chip.article-tag-2 { background:rgba(102,187,106,.25); color:#81c784; }

/* 产品标签样式 - 循环颜色（无边线） */
.mcp-card .tag-chip.product-tag-0 { background:#fff8e1; color:#f57c00; }
.mcp-card .tag-chip.product-tag-1 { background:#e8f5e8; color:#2e7d32; }
.mcp-card .tag-chip.product-tag-2 { background:#fce4ec; color:#c2185b; }
.mcp-card .tag-chip.product-tag-3 { background:#e3f2fd; color:#1976d2; }

.dark-theme .mcp-card .tag-chip.product-tag-0 { background:rgba(255,183,77,.25); color:#ffb74d; }
.dark-theme .mcp-card .tag-chip.product-tag-1 { background:rgba(76,175,80,.25); color:#81c784; }
.dark-theme .mcp-card .tag-chip.product-tag-2 { background:rgba(233,30,99,.25); color:#f06292; }
.dark-theme .mcp-card .tag-chip.product-tag-3 { background:rgba(33,150,243,.25); color:#64b5f6; }

/* 通用标签的暗色主题调整 */
.dark-theme .mcp-card .tag-chip { background:rgba(255,255,255,.12); color:#e0e0e0; }

.mcp-card .meta{ display:flex; align-items:center; justify-content:space-between; margin-top:10px; font-size:12px; color:var(--text-secondary); }
.mcp-card .meta .left .item{ margin-right:10px; white-space:nowrap; }
.mcp-card .meta i{ margin-right:4px; }

/* ====== 热议话题：扁平 chips（无边线） ====== */
.hot-tags{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:12px 14px;
}
.hot-tags li{ margin:0; padding:0; }
.hot-tags .chip{
  display:inline-flex; align-items:center;
  height:36px; padding:0 16px;
  font-size:14px; border:none; border-radius:999px;
  text-decoration:none;
  background:rgba(138,180,248,.22);
  color:#67a1ff;
  transition:background .2s ease, transform .1s ease;
}
.hot-tags .chip:hover{ background:rgba(138,180,248,.30); text-decoration:none; }
.dark-theme .hot-tags .chip{ background:rgba(138,180,248,.22); color:#c7d7ff; }
.dark-theme .hot-tags .chip:hover{ background:rgba(138,180,248,.30); }

@media (max-width:768px){
  .google-search-container{ padding:28px 0 12px; }
  .search-card{ --btn-size:40px; --btn-gap:12px; max-width:100%; padding:16px calc(var(--btn-size) + var(--btn-gap) + 14px) 12px 16px; border-radius:22px; }
  .search-card .search-input{ min-height:80px; font-size:18px; }
}