/* ==========================================================================
   380搜索 首页样式（学习复刻版 · 二轮实测对齐）
   --------------------------------------------------------------------------
   设计规范（全部来自对原站 DOM 计算样式与坐标的逐一实测）：
   - 全局：Arial 12px 基准；页面定宽 1265px；主体 900px 居中
   - 文字层级：#333 标题 / #666 次级 / #999 辅助 / #ccc 页脚
   - 品牌绿渐变：#0fb264 → #08e5aa；投影 rgba(30,140,103,.1)
   ========================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  font-family: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei",
    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  color: #333;
  /* 顶部一圈极淡的品牌绿光晕：页面有层次感，同时保持白底质感 */
  background:
    radial-gradient(880px 400px at 50% -60px, rgba(15, 178, 100, .07), rgba(15, 178, 100, 0) 70%),
    #ffffff;
  background-attachment: fixed;
  transition: background-color .3s;
}
::selection { background: rgba(15, 178, 100, .18); }

a { color: inherit; text-decoration: none; }
ul, li { list-style: none; }
button { font-family: inherit; border: none; background: none; cursor: pointer; }
textarea { font-family: inherit; border: none; outline: none; resize: none; background: transparent; }

.clearfix::after { content: ""; display: block; clear: both; }

/* ==========================================================================
   1. 页面外壳
   ========================================================================== */
.page-wrap {
  width: 1265px;
  margin: 0 auto;
  min-height: 100vh;
}

/* ==========================================================================
   2. 顶部导航栏（高 20px）
   ========================================================================== */
.site-header {
  position: relative;
  height: 20px;
  z-index: 100;
}

.header-inner {
  position: relative;
  height: 20px;
}

/* ---- 左侧主导航：链接 margin-left 20px，13px #666，行高 18 ---- */
.main-nav { position: relative; }
.channel-nav { height: 18px; line-height: 18px; }
.channel-nav a {
  display: inline-block;
  margin-left: 20px;
  height: 18px;
  font-size: 13px;
  color: #666;
}
.channel-nav a:hover { color: #19b955; }

/* 更多下拉菜单 */
.nav-more-menu {
  display: none;
  position: absolute;
  top: 26px;
  left: 0;
  width: 96px;
  padding: 6px 0;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
}
.nav-more-menu.show { display: block; }
.nav-more-menu a {
  display: block;
  height: 30px;
  line-height: 30px;
  padding: 0 16px;
  font-size: 13px;
  color: #666;
}
.nav-more-menu a:hover { background: #f5f6f7; color: #19b955; }

/* ---- 天气容器：150x24 @ left:895 top:8（悬挂于 20px 头部下方） ---- */
.weather-bar {
  position: absolute;
  top: 8px;
  right: 220px;
  width: 150px;
  height: 24px;
}
.weather {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
  font-size: 13px;
  color: #666;
  line-height: 15px;
}
.weather:hover { color: #19b955; }
.weather-temp { display: inline-flex; align-items: center; gap: 3px; }
.weather-icon { flex: none; }
.weather-quality {
  display: inline-block;
  padding: 0 3px;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  background: linear-gradient(180deg, #6fc97d, #63c06e);
  border-radius: 3px;
  line-height: 15px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}

/* ---- 右侧个人操作：总宽 220 贴右缘，li 内边距撑开间距 ---- */
.side-nav {
  position: absolute;
  top: 12px;
  right: 0;
  width: 220px;
  height: 16px;
  line-height: 16px;
}
.side-nav ul { display: flex; }
.side-nav li { flex: none; }
.side-nav li.nav-setting { padding: 0 11px; }   /* 设置   → 46 */
.side-nav li.nav-hide    { padding: 0 12px; }   /* 隐藏资讯 → 72 */
.side-nav li.nav-skin    { padding: 0 11px; }   /* 换肤   → 46 */
.side-nav li.nav-login   { padding: 0 16px; }   /* 登录   → 56 */
.side-nav a { font-size: 12px; color: #666; }
.side-nav a:hover { color: #19b955; }

/* 设置 / 换肤 下拉面板 */
.setting-panel, .skin-panel {
  display: none;
  position: absolute;
  top: 30px;
  right: 74px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
  z-index: 110;
}
.setting-panel.show { display: block; }
.setting-panel a {
  display: block;
  width: 100px;
  height: 30px;
  line-height: 30px;
  padding: 0 14px;
  font-size: 13px;
  color: #666;
}
.setting-panel a:hover { background: #f5f6f7; color: #19b955; }
.skin-panel { padding: 8px; }
.skin-panel.show { display: flex; gap: 6px; }
.skin-block {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid #e3e7e5;
  cursor: pointer;
  position: relative;
  transition: transform .15s ease, box-shadow .15s ease;
}
.skin-block:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
.skin-block.current {
  box-shadow: inset 0 0 0 2px #0fb264;
  border-color: #0fb264;
}

/* ==========================================================================
   3. 主体 900px 居中（顶距 60 + 头部 20 = 80）
   ========================================================================== */
.main {
  width: 900px;
  margin: 60px auto 0;
}

/* ---- Logo 区：265x60 水平居中，入场动画 + 悬停微动 ---- */
.logo-area {
  height: 60px;
  text-align: center;
}
.logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 265px;
  height: 60px;
  animation: logoIn .6s ease-out both;
}
.logo-svg {
  display: block;
  transition: transform .3s ease;
}
.logo:hover .logo-svg { transform: translateY(-2px); }
@keyframes logoIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- AI 工具胶囊：800px 容器，左对齐，间距 12px ---- */
.ai-tabs {
  position: relative;
  display: flex;
  align-items: flex-start;
  width: 800px;
  margin: 35px auto 0;
  height: 36px;
}
.ai-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;               /* 6px 会挤压"AI PPT"文字导致换行，4px 与原站一致 */
  width: 95px;
  height: 36px;
  padding: 0 16px;
  margin-right: 12px;
  font-size: 13px;
  color: #202224;
  background: #fff;
  border-radius: 36px;
  box-shadow:
    0 3px 8px 0 rgba(30, 140, 103, .05),
    0 10px 22px -10px rgba(15, 178, 100, .10);
  transition: box-shadow .22s ease, transform .22s ease;
}
.ai-pill .text {
  font-size: 13px;
  white-space: nowrap;    /* 防止"AI PPT"等含空格文字换行 */
}
.ai-pill:hover {
  box-shadow:
    0 5px 12px 0 rgba(30, 140, 103, .12),
    0 14px 28px -10px rgba(15, 178, 100, .16);
  transform: translateY(-2px);
}
.ai-pill:active { transform: translateY(0) scale(.97); }
.ai-pill-more { width: 94px; margin-right: 0; }

/* 更多工具下拉 */
.more-tool-list {
  display: none;
  position: absolute;
  top: 44px;
  left: 0;
  width: 148px;
  padding: 6px 0;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
  z-index: 120;
}
.more-tool-list.show { display: block; }
.more-tool-list a {
  display: block;
  height: 32px;
  line-height: 32px;
  padding: 0 16px;
  font-size: 13px;
  color: #666;
}
.more-tool-list a:hover { background: #f5f6f7; color: #19b955; }

/* ---- 搜索区（800 宽） ---- */
.search-section {
  width: 800px;
  margin: 12px auto 0;
}

/* 搜索框 800x119：白底、圆角 17、三层绿色光影（运营级质感） */
.search-box {
  position: relative;
  height: 119px;
  background: #fff;
  border-radius: 17px;
  box-shadow:
    0 2px 4px rgba(30, 140, 103, .05),
    0 4px 10px rgba(30, 140, 103, .10),
    0 14px 34px rgba(15, 178, 100, .10);
  transition: box-shadow .25s ease, transform .25s ease;
}
.search-box:hover {
  box-shadow:
    0 4px 8px rgba(30, 140, 103, .08),
    0 8px 18px rgba(30, 140, 103, .14),
    0 20px 44px rgba(15, 178, 100, .16);
  transform: translateY(-1px);
}
/* 输入聚焦：内侧 1.5px 品牌绿环，让用户明确知道在输入 */
.search-box:focus-within {
  box-shadow:
    inset 0 0 0 1.5px rgba(15, 178, 100, .55),
    0 4px 8px rgba(30, 140, 103, .08),
    0 8px 20px rgba(30, 140, 103, .14),
    0 22px 48px rgba(15, 178, 100, .18);
}
/* 内层容器 padding：16px 12px 12px */
.search-box-inner { padding: 16px 12px 12px; }

/* 输入区：高 51，textarea 高 48 */
.search-input-area { height: 51px; }
#searchForm { height: 100%; }
#searchInput {
  width: 100%;
  height: 48px;
  padding-left: 8px;
  font-size: 16px;
  line-height: 24px;
  color: #333;
  caret-color: #333;
}
#searchInput::placeholder { color: #999; font-size: 16px; }

/* 操作区：高 40，无上边距，问AI 靠左 / 搜索 靠右 */
.search-actions {
  display: flex;
  align-items: center;
  height: 40px;
}

/* 问AI 按钮 79x36：SVG 渐变描边（加载动画 + hover 高亮） */
.ask-ai-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 79px;
  height: 36px;
  border-radius: 12px;
}
.ask-ai-btn .ai-btn-border {
  position: absolute;
  inset: 0;
}
.ask-ai-btn .ai-action-border-hover { opacity: 0; transition: opacity .2s; }
.ask-ai-btn:hover .ai-action-border-hover { opacity: 1; }
.ask-ai-btn .text {
  position: relative;
  font-size: 14px;
  color: #000;
}
.ai-btn-icon { position: relative; flex: none; }

.actions-separator { flex: 1; }

/* 搜索按钮 104x40：品牌绿渐变 + 悬停扫光，白字 17 */
.search-btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 104px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(279deg, #0fb264 -28.74%, #08e5aa 133.43%);
  font-size: 17px;
  color: #fff;
  transition: filter .2s, transform .1s, box-shadow .2s;
}
/* 悬停扫光：一条斜向高光划过按钮 */
.search-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-18deg);
  transition: left .5s ease;
}
.search-btn:hover { filter: brightness(1.05); box-shadow: 0 6px 16px rgba(15, 178, 100, .35); }
.search-btn:hover::after { left: 135%; }
.search-btn:active { transform: scale(.97); }

/* ---- 搜索区结束 ---- */

/* ==========================================================================
   4. 资讯卡片（900 宽：左 560 信息流 + 右 280 实时热搜）
   ========================================================================== */
.hot-card {
  margin-top: 48px;
  opacity: 1;
  transition: opacity .3s;
  /* 入场：整卡轻轻上浮淡入 */
  animation: cardIn .55s ease-out both;
}
.hot-card.hidden { display: none; }
@keyframes cardIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 卡片顶线：38px 纯间距占位（实测无边框） */
.card-top-line { height: 38px; }

.hot-card-body {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

/* ---- 左列：信息流（560 宽；内容 540 = 左内边距 20） ---- */
.feed-col { width: 560px; }

/* Tab 行：相对卡片顶线下沉 18px（margin-top -20） */
.feed-tabs {
  height: 36px;
  margin-top: -20px;
  padding-left: 20px;
}
.tab-fixed { display: flex; height: 36px; align-items: center; }
.feed-tab {
  position: relative;
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  color: #999;
  margin-right: 29px;
}
.feed-tab.selected {
  color: #333;
  font-weight: 700;
}
.feed-tab .line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 2px;
  border-radius: 1px;
  background: transparent;
}
.feed-tab.selected .line { background: #0fb264; }

/* 信息流列表：左内边距 20 */
.feed-list { padding-left: 20px; }

.feed-item {
  padding: 10px 0;
}

/* 信息流条目（统一模板）：左图 178x113 + 右文
   （img 上下各浮 3px，条目总高 139px） */
.feed-link {
  display: flex;
  align-items: stretch;
}
.feed-img {
  flex: none;
  width: 178px;
  height: 113px;
  margin: 3px 0;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}
.feed-img img {
  display: block;
  width: 100%;
  height: 100%;
  transition: transform .45s ease;
}
.feed-link:hover .feed-img img { transform: scale(1.05); }
.feed-img::after {
  /* 底部渐隐遮罩（对应原站 g-img-mask） */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 34px;
  background: linear-gradient(to top, rgba(0, 0, 0, .18), transparent);
}
.feed-con {
  flex: 1;
  margin: 4px 0;
  padding-left: 10px;
  min-width: 0;
}
.feed-title {
  font-size: 18px;
  line-height: 24px;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .15s;
}
.feed-link:hover .feed-title { color: #19b955; }
.feed-meta {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  line-height: 20px;
  color: #999;
  white-space: nowrap;
  overflow: hidden;
}
.feed-source { overflow: hidden; text-overflow: ellipsis; }
.feed-follow {
  flex: none;
  font-size: 13px;
  color: #fa5050;
  cursor: pointer;
}
.feed-follow:hover { text-decoration: underline; }
.feed-time { flex: none; }

.feed-loading {
  height: 35px;
  line-height: 35px;
  text-align: center;
  font-size: 13px;
  color: #999;
}

/* ---- 右列：实时热搜（280 宽；顶对齐卡片 margin-top -38；标题下沉 30） ---- */
.side-col {
  width: 280px;
  margin-left: 40px;
  margin-top: -38px;
  padding-top: 30px;
}

.hot-search-title {
  display: flex;
  align-items: center;
  height: 25px;
  margin-bottom: 15px;
}
.hot-search-icon {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: 68px;
  height: 22px;
  font-style: normal;
  font-size: 14px;
  font-weight: 700;
  color: #333;
}
.hot-search-date {
  flex: 1;
  font-size: 13px;
  color: #999;
}
.hot-search-change {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 13px;
  color: #666;
}
.hot-search-change:hover { color: #19b955; }

.hot-search-list { margin: 0; }
.hot-search-item {
  display: flex;
  align-items: center;
  height: 22px;
  margin: 0 0 10px -6px;
  padding: 0 6px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color .18s ease;
}
.hot-search-item:hover { background: rgba(15, 178, 100, .06); }
.hot-search-item .rank {
  flex: none;
  width: 16px;
  text-align: center;
  font-style: normal;
  font-size: 14px;
  font-weight: 400;
  color: #666;
}
.hot-search-item.r1 .rank { color: #eb0000; }
.hot-search-item.r2 .rank { color: #ff5e00; }
.hot-search-item.r3 .rank { color: #ffa200; }
.hot-search-item .word {
  flex: 1;
  font-size: 14px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hot-search-item:hover .word { color: #19b955; }
.hot-search-item .flag {
  flex: none;
  width: 10px;
  height: 14px;
  margin-left: 6px;
}

/* ==========================================================================
   5. 页脚（原版为 position:fixed 贴底，高 36px 单行）
   ========================================================================== */
.site-footer {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1265px;
  height: 36px;
  padding: 6px 0;
  text-align: center;
  font-size: 12px;
  color: #ccc;
  line-height: 24px;
  background: #fff;
  z-index: 90;
}
.footer-links { line-height: 24px; }
.footer-links a {
  display: inline-block;
  margin: 0 6px;
  color: #ccc;
}
.footer-links a:hover { color: #19b955; }
.footer-links span { display: inline-block; margin: 0 6px; }
.footer-copy {
  /* 原版备案信息为 inline-block，随行换行落到 36px 高度之外（不可见） */
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  line-height: 24px;
  margin: 0;
}

/* ==========================================================================
   6. 结束（无提示浮层）
   ========================================================================== */

/* ==========================================================================
   7. 运营级细节：焦点可见性 / 动效降级 / 极简滚动条
   ========================================================================== */
:focus-visible {
  outline: 2px solid rgba(15, 178, 100, .6);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 用户系统开启"减少动态效果"时，关闭全部动画与过渡 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* 极简滚动条（WebKit 内核） */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-thumb {
  background: #d9e6df;
  border-radius: 6px;
  border: 2px solid #fff;
}
::-webkit-scrollbar-thumb:hover { background: #bcd8ca; }
::-webkit-scrollbar-track { background: transparent; }