/* ============================================================
   打工魂智库 · Heo 设计语言升级 v16（2026-10-14）
   对标：NotionNext Heo 主题（MIT）的浅色模式设计系统
   只动视觉层：圆角 / 阴影 / 间距 / 字体层级 / hover 动效
   品牌主色保持 #ff5a2a（不动品牌），仅升级质感
   ============================================================ */
:root {
  --heo-bg: #f7f9fe;
  --heo-card: #ffffff;
  --heo-card-muted: #f1f3f8;
  --heo-text: #1f2329;
  --heo-text-2: #4b5563;
  --heo-text-3: #8a919c;
  --heo-primary: #ff5a2a;
  --heo-primary-deep: #e64a1f;
  --heo-gold: #ffb020;
  --heo-border: #e6e9ef;
  --heo-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --heo-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .06);
  --heo-shadow-hover: 0 2px 6px rgba(16, 24, 40, .06), 0 18px 44px rgba(16, 24, 40, .10);
  --heo-r-sm: 8px;
  --heo-r: 12px;
  --heo-r-lg: 16px;
  --heo-r-xl: 24px;
  --heo-ease: cubic-bezier(.4, 0, .2, 1);
}

/* ---------- 基础 ---------- */
body {
  background: var(--heo-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::selection { background: rgba(255, 90, 42, .16); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(60, 60, 67, .28); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(60, 60, 67, .45); }
a { transition: color .2s var(--heo-ease); }
:focus-visible { outline: 2px solid rgba(255, 90, 42, .55); outline-offset: 2px; border-radius: 6px; }

/* ---------- 卡片（Heo 核心语言：圆角12 + 柔和阴影 + 边框变色hover） ---------- */
.card {
  background: var(--heo-card);
  border: 1px solid var(--heo-border);
  border-radius: var(--heo-r);
  box-shadow: var(--heo-shadow-sm);
  transition: border-color .25s var(--heo-ease), box-shadow .3s var(--heo-ease), transform .3s var(--heo-ease);
}
a.card:hover, .card:hover {
  border-color: rgba(255, 90, 42, .45);
  box-shadow: var(--heo-shadow-hover);
  transform: none; /* Heo 语言：用阴影+边框表达悬浮，不做上浮位移 */
}
.card .icon {
  display: inline-block;
  transition: transform .35s var(--heo-ease);
}
a.card:hover .card .icon, .card:hover .card .icon, a.card:hover > .icon, .card:hover > .icon, a.card:hover .icon, .card:hover .icon {
  transform: scale(1.12) rotate(-4deg); /* 呼应 Heo 封面 group-hover:scale-105 */
}
.card h3 {
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.4;
}
.card p {
  line-height: 1.65;
  color: var(--heo-text-2);
}
.card .go {
  transition: color .2s var(--heo-ease), gap .25s var(--heo-ease);
}
/* 精选卡（渐变描边）：加阴影，与普通卡拉开层级 */
.card.pick {
  box-shadow: var(--heo-shadow);
}
a.card.pick:hover, .card.pick:hover {
  box-shadow: var(--heo-shadow-hover);
}

/* ---------- 徽标 ---------- */
.badge {
  letter-spacing: .03em;
  font-weight: 700;
  box-shadow: var(--heo-shadow-sm);
}

/* ---------- 搜索框：Heo 式白色卡片搜索 ---------- */
.search {
  background: var(--heo-card) !important;
  border: 1px solid var(--heo-border);
  border-radius: var(--heo-r);
  box-shadow: var(--heo-shadow-sm);
  transition: border-color .25s var(--heo-ease), box-shadow .25s var(--heo-ease);
  overflow: hidden;
}
.search:focus-within {
  border-color: rgba(255, 90, 42, .55);
  box-shadow: 0 0 0 4px rgba(255, 90, 42, .10), var(--heo-shadow);
}
.search input { font-size: 15px; }
.search button {
  transition: background .2s var(--heo-ease);
  font-weight: 700;
  letter-spacing: .05em;
}
.search button:hover { background: var(--heo-primary-deep); }

/* ---------- 分区标题：更紧的字距，更克制的分割线 ---------- */
.sec-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--heo-text);
}
.sec-title .line { background: var(--heo-border); }

/* ---------- 标签 / 热搜词：胶囊按钮加过渡 ---------- */
.tagrow button, .hotwords button {
  transition: all .2s var(--heo-ease);
  box-shadow: var(--heo-shadow-sm);
}
.tagrow button:hover, .hotwords button:hover {
  transform: translateY(-1px);
  box-shadow: var(--heo-shadow);
}
.tagrow button.on {
  box-shadow: 0 4px 14px rgba(255, 90, 42, .35);
}

/* ---------- 顶栏：毛玻璃（Heo 式） ---------- */
.topbar {
  background: rgba(255, 255, 255, .88) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--heo-shadow-sm);
}
.topbar h1 {
  font-weight: 800;
  letter-spacing: -.01em;
}
.topbar .ver {
  border-radius: 20px;
  font-weight: 600;
}

/* ---------- 内容卡片：tips / note / vote ---------- */
.tips, .note, .vote {
  background: var(--heo-card);
  border: 1px solid var(--heo-border);
  border-radius: var(--heo-r);
  box-shadow: var(--heo-shadow-sm);
}
.tips h2 {
  font-weight: 800;
  letter-spacing: -.01em;
}

/* ---------- 列表行：修复深色 hover 残留，统一浅色 ---------- */
.subrow {
  border-bottom-color: #eef1f6 !important;
  transition: background .2s var(--heo-ease);
}
.subrow:hover {
  background: var(--heo-card-muted) !important;
}
.subrow .row-main, .subrow { border-radius: 0; }

/* ---------- 行动按钮 ---------- */
.card a.go, a.go, .go {
  border-radius: 10px;
  transition: background .2s var(--heo-ease), box-shadow .25s var(--heo-ease), transform .2s var(--heo-ease);
  box-shadow: var(--heo-shadow-sm);
}
.card a.go:hover, a.go:hover {
  box-shadow: 0 6px 18px rgba(255, 90, 42, .35);
  transform: translateY(-1px);
}

/* ---------- 页脚：更松的呼吸感 ---------- */
footer {
  color: var(--heo-text-3);
  letter-spacing: .02em;
  padding-top: 28px;
}

/* ---------- 品牌字：收紧字距 ---------- */
.brand {
  letter-spacing: .01em;
  font-weight: 800;
}

/* ---------- 移动端微调 ---------- */
@media (max-width: 640px) {
  .card { border-radius: var(--heo-r); }
  .sec-title { font-size: 18px; }
}