/* ============================================
   PanSou - Minimalist UI 覆盖样式
   Warm monochrome, editorial, flat
   ============================================ */

:root {
  /* 暖米白背景 */
  --background: 40 20% 97%;
  --background-light: 40 20% 97%;
  --background-container: 40 20% 97%;
  --background-hover: 40 15% 94%;
  /* 白卡片 */
  --card: 0 0% 100%;
  --card-hover: 40 12% 96%;
  --card-active: 40 10% 93%;
  /* 暖深灰正文 */
  --foreground: 30 8% 20%;
  --card-foreground: 30 8% 20%;
  /* 暖灰边框 */
  --border: 40 8% 90%;
  --border-hover: 40 8% 85%;
  --border-active: 40 8% 80%;
  --input: 40 8% 90%;
  /* 次要文字 */
  --muted: 40 12% 95%;
  --muted-foreground: 30 6% 45%;
  /* 主色:近黑(替换原紫色) */
  --accent: 30 8% 12%;
  --accent-foreground: 0 0% 98%;
  --accent-secondary: 30 8% 24%;
  --ring: 30 8% 12%;
  --primary: 30 8% 12%;
  --primary-foreground: 0 0% 98%;
  --secondary: 40 10% 95%;
  --secondary-foreground: 30 8% 20%;
  --popover: 0 0% 100%;
  --popover-foreground: 30 8% 20%;
  --dot-color: 40 12% 95%;
  --destructive: 0 65% 55%;
}

/* 字体 */
body {
  font-family: 'SF Pro Display', 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}

/* 卡片统一细边框 + 柔和圆角,去掉重阴影 */
div[class*="rounded"], main, section, header, footer {
  box-shadow: none !important;
}

/* 弱化残留阴影 */
.shadow-lg, .shadow-md, .shadow-xl, .shadow-sm {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

/* 标题字距收紧,编辑感 */
h1, h2, h3 {
  letter-spacing: -0.02em !important;
  font-weight: 600 !important;
}

/* 标签/徽章:小字号,宽字距,大写感 */
span[class*="badge"], span[class*="tag"], span[class*="px-2"] {
  font-size: 0.75rem !important;
  letter-spacing: 0.04em !important;
}

/* 链接:无下划线,悬停变深 */
a {
  text-decoration: none !important;
}

/* ===== 加强覆盖:近黑按钮 + 米白底 ===== */
body, html {
  background-color: #F7F6F3 !important;
}

/* 主导航搜索按钮:近黑 */
button.bg-blue-600, button[class*="bg-blue-600"] {
  background-color: #1a1a1a !important;
  border-color: #1a1a1a !important;
  border-radius: 6px !important;
}
button.bg-blue-600:hover, button[class*="bg-blue-600"]:hover {
  background-color: #333333 !important;
}

/* 输入框细边框 */
input[type="text"], input[class*="border-blue"], input[class*="focus:border-blue"] {
  border-color: #E0DDD6 !important;
}
input:focus {
  border-color: #1a1a1a !important;
  box-shadow: none !important;
}

/* 次级按钮:白底细边框 */
button[class*="border"], button[class*="outline"] {
  border-color: #E0DDD6 !important;
  background-color: #FFFFFF !important;
  color: #2F3437 !important;
}

/* ===== 导航按钮:active 态近黑(搜索按钮) ===== */
button.nav-button, .nav-button {
  border-radius: 6px !important;
}
button.nav-button.active, .nav-button.active {
  background-color: #1a1a1a !important;
  border-color: #1a1a1a !important;
  color: #FFFFFF !important;
}
button.nav-button.active:hover, .nav-button.active:hover {
  background-color: #333333 !important;
}
/* ============================================
   PanSou v4 - 大搜索栏居中 + 上移动画 + logo 美化
   ============================================ */

/* ==== 首页大搜索栏:垂直居中(水平居中靠 mx-auto) ==== */
.search-main .search-page {
  display: block;
}

/* 搜索表单块:初始在视口中间偏上,搜索后平滑上移到顶部 */
.search-page .search-form-block {
  width: 100%;
  max-width: 720px;
  margin-top: calc(34vh - 90px);
  transition: margin-top 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 搜索后:上移动画(动画触发由 pan-patch.js 加 .searched) */
.search-page.searched .search-form-block {
  margin-top: 0;
}

/* 搜索容器:白底、细边框、柔和阴影,聚焦时加深 */
.search-container {
  border-radius: 12px !important;
  background: #FFFFFF !important;
  border: 1px solid #E0DDD6 !important;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.05) !important;
  transition: box-shadow 0.3s ease, border-color 0.3s ease !important;
}
.search-container:focus-within {
  border-color: #A8A49B !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.09) !important;
}

/* 搜索输入框:字号放大 */
.search-container input {
  font-size: 16px !important;
}

/* 搜索按钮:圆角 + hover 微浮起 */
.search-container button {
  border-radius: 8px !important;
  transition: all 0.25s ease !important;
}
.search-container button:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18) !important;
}
.search-container button:active {
  transform: translateY(0) !important;
}

/* ==== 导航 logo 方块:渐变 + 精致圆角 + 微阴影 ==== */
nav .w-8.h-8, header .w-8.h-8 {
  background: linear-gradient(135deg, #3A3F46 0%, #17181A 100%) !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16) !important;
}

/* 导航站名:更精致 */
nav h1, header h1 {
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}

/* 页脚版权:弱化 */
footer span {
  color: #9A968D !important;
  font-size: 0.8rem !important;
}

/* ============================================
   v5 - 删空卡片 + 搜索栏加大 + 搜索后缩小
   ============================================ */

/* 删首页空状态卡片(输入关键词开始搜索) */
.empty-state {
  display: none !important;
}

/* 搜索栏加大:整体加宽 */
.search-page .search-form-block {
  max-width: 900px !important;
}

/* 输入框:更高更大 */
.search-container input {
  height: 56px !important;
  font-size: 18px !important;
  padding-left: 22px !important;
  padding-right: 76px !important;
  border-radius: 10px !important;
  border-color: transparent !important;
}

/* 高级筛选按钮:加大 */
.search-container button.advanced-toggle-left {
  width: 46px !important;
  height: 46px !important;
  margin-left: 6px !important;
}

/* 搜索按钮:加宽(高度跟随容器) */
.search-container button[class*="inline-flex"] {
  width: 62px !important;
  border-radius: 10px !important;
}

/* 搜索容器内图标放大 */
.search-container svg {
  width: 21px !important;
  height: 21px !important;
}

/* 搜索后:上移(已有 margin-top 动画)+ 缩小 */
.search-container {
  transform-origin: top center;
  transition: box-shadow 0.3s ease, border-color 0.3s ease,
              transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.search-page.searched .search-container {
  transform: scale(0.86) !important;
}

/* 修复:父容器 max-w-content 限制宽度 */
.search-page .max-w-content {
  max-width: 900px !important;
}

/* ============================================
   v7 - 长标题布局修复
   ============================================ */

/* 标题按钮:允许 flex 收缩,防止撑破卡片 */
.result-title-button {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
}

/* 标题行:最多 2 行,超出省略号 */
.result-title-row {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
  word-break: break-all !important;
  white-space: normal !important;
}

.result-title {
  overflow: hidden !important;
}

/* ===== v9 - block 布局下搜索栏水平居中 ===== */
.search-page .search-form-block {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ===== v11 - 修复:高级筛选按钮透明不可见(只加视觉属性,不动布局) ===== */
.search-container button.advanced-toggle-left {
  background: hsl(220 14.3% 95.9%) !important;
  border: 1px solid hsl(220 13% 87%) !important;
  border-radius: 10px !important;
  color: hsl(222 84% 4.9%) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.05) !important;
}
.search-container button.advanced-toggle-left:hover {
  background: hsl(220 13% 91%) !important;
}
.search-container button.advanced-toggle-left.active,
.search-container button.advanced-toggle-left.has-filter {
  background: hsl(217 91% 60%) !important;
  border-color: hsl(217 91% 60%) !important;
  color: #fff !important;
}

/* ===== v12 - 修复:筛选按钮悬浮遮挡 placeholder,输入框左侧留出按钮空间 ===== */
.search-container input {
  padding-left: 64px !important;
}

/* ===== v13 - 筛选按钮融入搜索栏(同右侧搜索按钮):透明底+深色图标 ===== */
.search-container button.advanced-toggle-left {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #2f3437 !important;
}
.search-container button.advanced-toggle-left:hover {
  background: hsl(220 14.3% 95.9%) !important;
}

/* ===== v15 - 修复两个bug ===== */
/* bug1: 筛选按钮不该有搜索按钮的 hover 上浮+投影(会"突出搜索栏") */
.search-container button.advanced-toggle-left:hover {
  transform: none !important;
  box-shadow: none !important;
}
/* bug2: 高级筛选面板被透明 results-wrapper 覆盖导致点不了 → 提升层级 */
.advanced-panel {
  position: relative;
  z-index: 20 !important;
}
/* 激活态:蓝底白图标(放最后,确保盖过 hover 浅灰) */
.search-container button.advanced-toggle-left.active,
.search-container button.advanced-toggle-left.has-filter {
  background: hsl(217 91% 60%) !important;
  border-color: hsl(217 91% 60%) !important;
  color: #fff !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ===== v16 - 筛选按钮垂直居中(输入框56px,按钮46px,top:0偏上 → top:5px) ===== */
.search-container button.advanced-toggle-left {
  top: 5px !important;
}

/* ===== v17 - 手机端性能优化:面板开合动画 + 搜索栏 ===== */
/* 1. 面板开合动画:只过渡 transform(位移),不用 opacity——
      opacity+will-change 会把面板提成独立合成层,内部 input 表单控件另有渲染层,
      收起时内容与背景分层消失(用户反馈的"内容先消失背景后消失") */
.slide-down-enter-active,
.slide-down-leave-active {
  transition: transform 0.22s ease !important;
}
.slide-down-enter-from,
.slide-down-leave-to {
  transform: translateY(-8px);
  opacity: 1 !important; /* 覆盖原始 leave-to 的 opacity:0(input 有独立渲染层,透明度动画会分层消失) */
}
/* 注意:不给 .advanced-panel 加 will-change/opacity,避免分层 */
/* 2. 搜索容器:过渡去掉 box-shadow/border-color(阴影动画手机端卡顿),只留 transform */
.search-container {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
/* 3. 手机端面板紧凑化 */
@media (max-width: 768px) {
  .advanced-panel {
    padding: 12px !important;
    border-radius: 12px !important;
  }
  .advanced-content {
    gap: 12px !important;
  }
  .search-container .filter-input {
    height: 44px !important;
    font-size: 16px !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    -webkit-appearance: none !important;
  }
  .filter-label {
    gap: 3px !important;
  }
  .label-text {
    font-size: 13px !important;
  }
  .label-hint {
    font-size: 11px !important;
    line-height: 1.4 !important;
  }
}

/* ===== v22 - 面板悬浮定位:消除开合布局跳变(回收卡顿根因) ===== */
.search-container {
  position: relative;
}
.advanced-panel {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: calc(100% + 8px) !important;
  z-index: 20 !important;
}
/* ===== v23 - 全站换色(蓝→翡翠绿)+ GSAP 动画配套 ===== */
/* 1. 主题变量:蓝(217 91% 60%)→ 翡翠绿(160 84% 39% #10b981),紫 accent → 绿 */
:root {
  --primary: 160 84% 39% !important;
  --ring: 160 84% 39% !important;
  --input-unread: 160 84% 39% !important;
  --selection: 160 84% 39% !important;
  --selection-foreground: 0 0% 98% !important;
  --accent: 160 84% 39% !important;
  --accent-secondary: 160 84% 45% !important;
  --accent-foreground: 0 0% 98% !important;
  --primary-hover: 160 84% 33% !important;
}
/* 2. 定制里硬编码的蓝色 → 翡翠绿 */
.search-container button.advanced-toggle-left.active,
.search-container button.advanced-toggle-left.has-filter {
  background: hsl(160 84% 39%) !important;
  border-color: hsl(160 84% 39%) !important;
  color: #fff !important;
}
.search-container .filter-input:focus {
  border-color: hsl(160 84% 39%) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px hsl(160 84% 39% / 0.15) !important;
}
/* 3. 禁用 Vue 自带过渡(GSAP 全权接管面板开合动画) */
.slide-down-enter-active,
.slide-down-leave-active,
.slide-down-enter-from,
.slide-down-leave-to {
  transition: none !important;
  opacity: 1 !important;
  transform: none !important;
}
/* 4. 按钮微动效(纯合成属性,不卡顿) */
.search-container button.advanced-toggle-left {
  transition: background-color 0.2s ease, color 0.2s ease !important;
}
.search-container button.advanced-toggle-left:hover {
  transform: none !important;
  box-shadow: none !important;
}
/* 5. 面板卡片质感微调 */
.advanced-panel {
  background: #fff !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.07) !important;
}
/* ===== v24 - GSAP 动画系统(v12)配套 =====
   与 assets/pan-patch.v12.js 配套,追加在 v23 之后(版本号递增防 CDN 缓存)。
   目的:消除 GSAP 内联 transform 与 CSS transition 互相干扰导致的滞后/残影,
   并再次确认面板开合过渡完全交给 GSAP。 */

/* 1. 主搜索输入框:聚焦微缩放由 GSAP 全权控制。
      CSS 不再过渡 transform/opacity,避免 GSAP 每帧写入的内联样式
      被 transition-all 二次平滑(动画滞后、快速 focus/blur 叠加)。 */
.search-container input {
  transition: border-color 0.3s ease, box-shadow 0.3s ease,
              background-color 0.3s ease, color 0.3s ease !important;
}

/* 2. 筛选面板输入框:入场 stagger 动画期间 transform/opacity 同样交给 GSAP。 */
.advanced-panel .filter-input {
  transition: border-color 0.2s ease, box-shadow 0.2s ease,
              background-color 0.2s ease, color 0.2s ease !important;
}

/* 3. 面板开合过渡继续由 GSAP 接管(与 v23 一致,重复声明防缓存/加载顺序问题)。 */
.slide-down-enter-active,
.slide-down-leave-active,
.slide-down-enter-from,
.slide-down-leave-to {
  transition: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ============================================================
   v26 - 体验优化(在 v25 之后追加,版本号递增防 CDN 缓存)
   1. 搜索骨架卡(pan-sk-* 前缀,防与原版冲突)
   2. 首页最近搜索 + 热门搜索 chips(翡翠绿 accent,minimalist)
   3. 懒加载哨兵(pan-sentinel)
   4. header 左侧 logo 图标(文件夹)与隐藏首页 idle 空状态
   ============================================================ */

/* 1. 搜索骨架卡:浅灰底 #ECECF0→#F8F8FA,2s 慢速呼吸,圆角卡片 */
.pan-sk-grid {
  display: grid;
  gap: 12px;
  padding: 4px 0 8px;
}
.pan-sk-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid hsl(40 8% 92%);
}
.pan-sk-block {
  background-color: #ECECF0;
  border-radius: 8px;
  animation: pan-sk-breathe 2s ease-in-out infinite alternate;
}
.pan-sk-thumb {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  flex: none;
}
.pan-sk-lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-top: 4px;
}
.pan-sk-line-1 { width: 72%; height: 12px; }
.pan-sk-line-2 { width: 42%; height: 10px; }
.pan-sk-line-3 { width: 58%; height: 10px; }
@keyframes pan-sk-breathe {
  from { background-color: #ECECF0; }
  to   { background-color: #F8F8FA; }
}
@media (prefers-reduced-motion: reduce) {
  .pan-sk-block { animation: none; }
}

/* 2. 首页最近搜索 + 热门搜索(与搜索栏同宽 720px 居中) */
.pan-home-blocks {
  max-width: 720px;
  margin: 10px auto 0;
}
.pan-home-section {
  margin-top: 18px;
}
.pan-home-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: hsl(160 60% 22%);
  margin-bottom: 10px;
}
.pan-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pan-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  background: hsl(160 84% 95%);
  color: hsl(160 84% 25%);
  border: 1px solid hsl(160 60% 88%);
  font-size: 13px;
  line-height: 1.2;
  transition: background-color 0.2s ease, color 0.2s ease,
              border-color 0.2s ease, transform 0.15s ease;
}
.pan-chip:hover {
  background: hsl(160 70% 90%);
  border-color: hsl(160 60% 80%);
  color: hsl(160 80% 18%);
}
.pan-chip:active {
  background: hsl(160 70% 86%);
  border-color: hsl(160 60% 74%);
  transform: scale(0.97);
}
.pan-chip:focus-visible {
  outline: 2px solid hsl(160 84% 45% / 0.4);
  outline-offset: 2px;
}

/* 首页空状态下:隐藏原版 idle 空状态(输入关键词开始搜索),避免与 chips 重复 */
.search-page.pan-home-visible .results-wrapper .empty-state {
  display: none !important;
}
/* 手机端:结果块固定高度会留下空白,chips 出现时收回 */
.search-page.pan-home-visible .search-results-block {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* 3. 懒加载哨兵:列表末尾的小加载指示 */
.pan-sentinel {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: hsl(160 60% 35%);
  font-size: 12px;
}
.pan-sentinel::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid hsl(160 70% 85%);
  border-top-color: hsl(160 84% 45%);
  animation: pan-sk-spin 0.8s linear infinite;
}
@keyframes pan-sk-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .pan-sentinel::before { animation: none; }
}

/* ============================================================
   v27 - 热门搜索榜单卡片(在 v26 之后追加,版本号递增防 CDN 缓存)
   将首页 .pan-home-hot 区块升级为翡翠绿「热门榜单」卡片,与最近搜索
   小 chip 拉开明显档次。全部新类名 pan-hot-*,不触碰 .pan-chip
   (最近搜索)与搜索容器(GSAP 动画专属,严禁写入)。
   ============================================================ */

/* 1. 卡片容器:翡翠绿极浅渐变背景 + 圆角 + 轻阴影 */
.pan-hot-card {
  background: linear-gradient(160deg, hsl(160 84% 96%), #fff 55%);
  border: 1px solid hsl(160 50% 88%);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 6px 24px hsl(160 60% 30% / 0.08);
  margin-top: 18px;
}

/* 2. 标题行:火焰 SVG + 标题 + 右侧实时热度徽章 */
.pan-hot-head {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.pan-hot-fire {
  width: 16px;
  height: 16px;
  color: hsl(160 84% 39%);
  margin-right: 6px;
  flex: none;
}
.pan-hot-title {
  font-size: 15px;
  font-weight: 700;
  color: hsl(160 80% 18%);
}
.pan-hot-live {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  color: hsl(160 60% 10%);
  background: hsl(160 84% 39%);
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.06em;
}

/* 3. 词条网格:桌面 2 列,手机 1 列 */
.pan-hot-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

/* 4. 单个词条:白底胶囊卡片 */
.pan-hot-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid hsl(160 40% 90%);
  cursor: pointer;
  text-align: left;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.pan-hot-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px hsl(160 60% 30% / 0.12);
  border-color: hsl(160 60% 78%);
}
.pan-hot-item:active {
  transform: translateY(0) scale(0.98);
}

/* 5. 排名徽章:4-8 名灰色,前三名金/银/铜渐变 */
.pan-hot-rank {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 700;
  background: hsl(160 20% 90%);
  color: hsl(160 30% 42%);
}
.pan-hot-top1 .pan-hot-rank {
  background: linear-gradient(135deg, #f6c84b, #e09a0a);
}
.pan-hot-top2 .pan-hot-rank {
  background: linear-gradient(135deg, #d3dae2, #96a2ae);
}
.pan-hot-top3 .pan-hot-rank {
  background: linear-gradient(135deg, #e9a678, #c97a44);
}

/* 6. 词条主体:词 + 热度条 */
.pan-hot-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.pan-hot-word {
  font-size: 13.5px;
  font-weight: 600;
  color: hsl(222 24% 20%);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pan-hot-top1 .pan-hot-word,
.pan-hot-top2 .pan-hot-word,
.pan-hot-top3 .pan-hot-word {
  font-size: 14.5px;
  font-weight: 800;
}
.pan-hot-bar {
  height: 3px;
  border-radius: 999px;
  background: hsl(160 30% 90%);
  overflow: hidden;
}
.pan-hot-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, hsl(160 84% 55%), hsl(160 84% 39%));
}

/* 7. 热度值:右侧翡翠绿数字 */
.pan-hot-num {
  font-size: 11.5px;
  font-weight: 600;
  color: hsl(160 70% 35%);
  flex: none;
}

/* 8. 手机:单列 + 收紧卡片内边距 */
@media (max-width: 480px) {
  .pan-hot-grid {
    grid-template-columns: 1fr;
  }
  .pan-hot-card {
    padding: 14px;
  }
}