/* =============================================================================
   Kitter 静态站样式 —— KitterHub 同款设计令牌
   令牌直接取自 KitterHub 主站（frontend/src/styles/global.css）：
     浅色 primary #0061a4 / surface #f9f9ff / on-surface #191c20
     深色 primary #a6c8ff / surface #101418 / on-surface #dfe3e8
   规则：圆角统一 12px、胶囊 999px、边框用 outline 的 20% 混合、卡片阴影 0 1px 3px。
   深浅色自动跟随系统（无切换按钮）。无外部字体、无 emoji。
   ============================================================================= */

:root {
  --radius: 12px;
  --radius-pill: 999px;

  /* ---- 浅色（KitterHub light）---- */
  --md-sys-color-primary: #0061a4;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #cfe5ff;
  --md-sys-color-on-primary-container: #001d33;
  --md-sys-color-secondary: #535f70;
  --md-sys-color-tertiary: #445e91;
  --md-sys-color-error: #b3261e;
  --md-sys-color-surface: #f9f9ff;
  --md-sys-color-on-surface: #191c20;
  --md-sys-color-on-surface-variant: #43474e;
  --md-sys-color-outline: #73777f;
  --md-sys-color-outline-variant: #c3c6cf;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f2f3fa;
  --md-sys-color-surface-container: #edeef5;
  --md-sys-color-surface-container-high: #e7e8f0;

  --border-soft: color-mix(in srgb, var(--md-sys-color-outline) 20%, transparent);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, .07);
  --shadow-hover: 0 4px 14px rgba(0, 0, 0, .10);

  --font: system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* ---- 深色（KitterHub dark）---- */
@media (prefers-color-scheme: dark) {
  :root {
    --md-sys-color-primary: #a6c8ff;
    --md-sys-color-on-primary: #003258;
    --md-sys-color-primary-container: #00497d;
    --md-sys-color-on-primary-container: #cfe5ff;
    --md-sys-color-secondary: #bac7da;
    --md-sys-color-tertiary: #b3c5fb;
    --md-sys-color-error: #f2b8b5;
    --md-sys-color-surface: #101418;
    --md-sys-color-on-surface: #dfe3e8;
    --md-sys-color-on-surface-variant: #c3c6cf;
    --md-sys-color-outline: #8d9199;
    --md-sys-color-outline-variant: #43474e;
    --md-sys-color-surface-container-lowest: #0b0e11;
    --md-sys-color-surface-container-low: #171b1f;
    --md-sys-color-surface-container: #1d2024;
    --md-sys-color-surface-container-high: #272a2f;
    --shadow-card: 0 1px 3px rgba(0, 0, 0, .45);
    --shadow-hover: 0 6px 18px rgba(0, 0, 0, .55);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.75;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
::selection { background: color-mix(in srgb, var(--md-sys-color-primary) 28%, transparent); }

/* =============================================================================
   首页：一屏到底
   ============================================================================= */
body.page-home {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 40px 20px;
}

.stage {
  width: 100%; max-width: 880px; overflow: visible;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(28px, 6vh, 56px);
  text-align: center;
}

.identity { display: flex; flex-direction: column; align-items: center; }
.lockup { display: flex; align-items: center; gap: 16px; }
.mark { height: 44px; width: auto; flex: 0 0 auto; }

.wordmark {
  margin: 0;
  font-size: clamp(34px, 6vw, 54px);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.05;
  color: var(--md-sys-color-on-surface);
}

.tagline { margin: 18px 0 0; font-size: clamp(14px, 1.6vw, 16px); color: var(--md-sys-color-on-surface-variant); }

.entries { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; width: 100%; }

.entry {
  flex: 1 1 0; min-width: 150px; max-width: 240px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 62px; padding: 0 22px;
  background: var(--md-sys-color-surface-container);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  text-decoration: none; font-weight: 700; font-size: 15px;
  color: var(--md-sys-color-on-surface);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
.entry:hover { transform: translateY(-4px); border-color: var(--md-sys-color-primary); box-shadow: var(--shadow-hover); }
.entry-icon { display: inline-flex; align-items: center; color: var(--md-sys-color-on-surface); }
.entry-icon img { height: 22px; width: auto; }
.entry-label { white-space: nowrap; }

.foot {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 13px; color: var(--md-sys-color-on-surface-variant);
}
.foot a { text-decoration: none; }
.foot a:hover { color: var(--md-sys-color-primary); }
.dot { width: 3px; height: 3px; border-radius: var(--radius-pill); background: currentColor; opacity: .6; }

/* =============================================================================
   博客 / 文章（body.page-doc）
   ============================================================================= */
body.page-doc { display: block; padding: 0; }

.site-mark { display: block; max-width: 980px; margin: 0 auto; padding: 34px 22px 0; }
.site-mark img { height: 40px; width: auto; }

.blog { max-width: 980px; margin: 0 auto; padding: 36px 22px 72px; }
.blog-head { margin-bottom: 34px; }
.blog-title {
  margin: 0 0 10px; font-size: clamp(30px, 5vw, 44px); font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.15; text-wrap: balance;
}
.blog-lead { margin: 0; max-width: 620px; color: var(--md-sys-color-on-surface-variant); }

.post-card {
  display: flex; flex-direction: column; height: 100%;
  padding: 22px 22px 18px;
  background: var(--md-sys-color-surface-container);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), width 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s ease;
}
.post-card:hover { transform: translateY(-4px); border-color: var(--md-sys-color-primary); box-shadow: var(--shadow-hover); }

.post-featured {
  padding: 30px 28px 26px; margin-bottom: 18px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--md-sys-color-primary-container) 45%, var(--md-sys-color-surface-container)),
    var(--md-sys-color-surface-container) 70%);
}
.post-featured .post-title { font-size: clamp(22px, 3.2vw, 30px); }
.post-featured .post-desc { font-size: 15px; max-width: 680px; }

.post-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: stretch; }

.post-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.post-date { font-size: 13px; color: var(--md-sys-color-on-surface-variant); font-variant-numeric: tabular-nums; }

.post-title { margin: 0 0 10px; font-size: 18.5px; font-weight: 700; line-height: 1.45; letter-spacing: -0.01em; text-wrap: balance; }
.post-title a { text-decoration: none; }
.post-title a:hover { color: var(--md-sys-color-primary); }

.post-desc { margin: 0 0 16px; color: var(--md-sys-color-on-surface-variant); font-size: 14px; line-height: 1.85; }
.post-card .post-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.chip-soft {
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
}

/* 文章正文 */
.article { max-width: 720px; margin: 0 auto; padding: 26px 22px 64px; }
.article-title {
  margin: 0 0 16px; font-size: clamp(27px, 4.6vw, 40px); font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.22; text-wrap: balance;
}
.article-body { margin-top: 6px; }
.article-body h2 {
  position: relative; margin: 40px 0 14px; padding-left: 14px;
  font-size: 21px; font-weight: 700; letter-spacing: -0.01em;
}
.article-body h2::before {
  content: ''; position: absolute; left: 0; top: .42em;
  width: 3px; height: 1.05em; border-radius: var(--radius-pill);
  background: var(--md-sys-color-primary);
}
.article-body h3 { margin: 32px 0 12px; font-size: 17px; font-weight: 700; }
.article-body p { margin: 0 0 18px; line-height: 1.98; text-wrap: pretty; }
.article-body > p:first-of-type { font-size: 16.5px; }
.article-body ul, .article-body ol { margin: 0 0 18px; padding-left: 22px; }
.article-body li { margin-bottom: 9px; line-height: 1.9; }
.article-body code {
  padding: 2px 7px; border-radius: 8px;
  background: var(--md-sys-color-surface-container-high);
  font-family: var(--mono); font-size: 13px;
}
.article-body pre {
  margin: 0 0 20px; padding: 16px 18px; overflow-x: auto;
  background: var(--md-sys-color-surface-container);
  border: 1px solid var(--border-soft); border-radius: var(--radius);
  scrollbar-width: thin;
}
.article-body pre code { padding: 0; background: none; font-size: 13px; line-height: 1.7; }
.article-body blockquote {
  margin: 0 0 20px; padding: 14px 18px;
  border-left: 4px solid var(--md-sys-color-primary);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface-variant);
}
.article-body img { border-radius: var(--radius); margin: 6px 0 20px; }
.article-body a { color: var(--md-sys-color-primary); }
.article-body hr { border: 0; border-top: 1px solid var(--border-soft); margin: 30px 0; }

.back-chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 6px 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--md-sys-color-outline-variant);
  text-decoration: none; font-size: 13px; color: var(--md-sys-color-on-surface-variant);
  transition: border-color .14s ease, color .14s ease, background .14s ease;
}
.back-chip:hover {
  border-color: var(--md-sys-color-primary); color: var(--md-sys-color-primary);
  background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
}
.article-end { margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--border-soft); }

.muted { color: var(--md-sys-color-on-surface-variant); font-size: 14px; }

.doc-foot {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  padding: 26px 22px 46px; margin-top: 8px;
  border-top: 1px solid var(--border-soft);
  font-size: 13px; color: var(--md-sys-color-on-surface-variant);
}
.doc-foot a { color: var(--md-sys-color-on-surface-variant); text-decoration: none; }
.doc-foot a:hover { color: var(--md-sys-color-primary); }

@media (max-width: 560px) {
  body.page-home { padding: 64px 16px 32px; place-items: start center; }
  .entry { flex: 1 1 100%; max-width: none; }
  .mark { height: 34px; }
  .site-mark { padding: 22px 16px 0; }
  .site-mark img { height: 32px; }
  .blog { padding: 26px 16px 52px; }
  .article { padding: 20px 16px 48px; }
  .post-featured { padding: 22px 18px; }
}


/* --- 可点击卡片：整张卡片都能点，「阅读全文」做成按钮 --- */
.post-card { position: relative; }

/* 标题里的链接铺满整张卡片，点哪儿都能进文章（z-index 保证盖在按钮上方） */
.post-title a::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  border-radius: var(--radius);
}


/* 键盘可达：焦点时给卡片描边 */
.post-title a:focus-visible::after { outline: 2px solid var(--md-sys-color-primary); outline-offset: 2px; }


/* =============================================================================
   首页搜索：一个纯圆的搜索框，引擎下拉与搜索按钮都嵌在框内（纯 CSS，零 JS）
   ============================================================================= */
.sr-only { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.searchbox { position: relative; z-index: 5; width: 100%; max-width: 720px; }

/* 引擎选择：圆形触发按钮 + 浮层菜单 */
.eng-picker { position: absolute; left: 8px; top: 8px; z-index: 40; }
.eng-trigger {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  border: 0;                                   /* 引擎 LOGO 不加边框 */
  background: transparent;
  cursor: pointer; transition: background .16s ease, transform .16s ease;
}
.eng-trigger:hover { background: var(--md-sys-color-surface-container); }
.eng-logo { display: none; width: 24px; height: 24px; object-fit: contain; }

.eng-menu {
  display: none; position: absolute; left: 0; top: calc(100% + 10px);
  min-width: 210px; padding: 6px; z-index: 50;
  background: var(--md-sys-color-surface-container-high);
  border: 1px solid var(--border-soft); border-radius: 20px;
  box-shadow: var(--shadow-hover);
}
.eng-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-radius: 999px; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--md-sys-color-on-surface);
  transition: background .14s ease, color .14s ease;
}
.eng-item img { width: 20px; height: 20px; object-fit: contain; }
.eng-item:hover { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }

.eng-backdrop { display: none; position: fixed; inset: 0; z-index: 45; }
#eng-open:checked ~ .eng-backdrop { display: block; }
#eng-open:checked ~ .eng-picker .eng-menu { display: block; }

/* 搜索框本体：整条做成胶囊 */
.search-pane {
  display: none; align-items: center; gap: 8px;
  width: 100%; padding: 8px 8px 8px 66px;
  background: var(--md-sys-color-surface-container-lowest);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  box-shadow: var(--shadow-card);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.search-pane:focus-within { border-color: var(--md-sys-color-primary); box-shadow: var(--shadow-hover); }

.search-input {
  flex: 1 1 auto; min-width: 0; min-height: 46px; padding: 0 8px;
  border: 0; background: transparent; color: var(--md-sys-color-on-surface);
  font: inherit; font-size: 17px; outline: none;
}
.search-input::placeholder { color: var(--md-sys-color-on-surface-variant); opacity: .85; }

.search-go {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 46px; height: 46px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);
  transition: filter .16s ease, transform .16s ease;
}
.search-go:hover { filter: brightness(1.08); transform: scale(1.03); }

/* --- 分页 --- */
.list-info { margin: 0 0 18px; font-size: 13px; color: var(--md-sys-color-on-surface-variant); }
.pager { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 34px; }
.pager a, .pager span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 40px; padding: 0 14px;
  border-radius: var(--radius); border: 1px solid var(--border-soft);
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface); text-decoration: none;
  font-size: 14px; font-weight: 700;
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
.pager a:hover { transform: translateY(-4px); border-color: var(--md-sys-color-primary); }
.pager .now { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); border-color: transparent; }
.pager .gap { border: 0; background: transparent; min-width: 18px; }


/* --- 「阅读全文」：不再做按钮，改成一行克制的文字链接 --- */
.post-more {
  align-self: flex-start; margin-top: auto;
  display: inline-block; background: none; border: 0; padding: 0;
  color: var(--md-sys-color-primary);
  font-weight: 700; font-size: 13.5px; letter-spacing: .01em;
}
.post-card:hover .post-more { text-decoration: underline; }

/* 分页按钮：方形小按钮，当前页用实心 */
.list-info { margin: 0 0 16px; font-size: 13px; color: var(--md-sys-color-on-surface-variant); }
.pager { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin-top: 32px; }
.pager a, .pager span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; min-height: 38px; padding: 0 12px;
  border-radius: var(--radius); border: 1px solid var(--border-soft);
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface); text-decoration: none;
  font-size: 13.5px; font-weight: 700;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.pager a:hover { border-color: var(--md-sys-color-primary); color: var(--md-sys-color-primary); background: var(--md-sys-color-surface-container-high); }
.pager .now { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); border-color: transparent; }
.pager .gap { border: 0; background: transparent; min-width: 14px; padding: 0; color: var(--md-sys-color-on-surface-variant); }


#e-baidu:checked ~ .eng-picker .eng-logo[data-k="baidu"] { display: block; }
#e-baidu:checked ~ .pane-baidu { display: flex; }
#e-bing:checked ~ .eng-picker .eng-logo[data-k="bing"] { display: block; }
#e-bing:checked ~ .pane-bing { display: flex; }
#e-google:checked ~ .eng-picker .eng-logo[data-k="google"] { display: block; }
#e-google:checked ~ .pane-google { display: flex; }
#e-sogou:checked ~ .eng-picker .eng-logo[data-k="sogou"] { display: block; }
#e-sogou:checked ~ .pane-sogou { display: flex; }
#e-so360:checked ~ .eng-picker .eng-logo[data-k="so360"] { display: block; }
#e-so360:checked ~ .pane-so360 { display: flex; }
#e-ddg:checked ~ .eng-picker .eng-logo[data-k="ddg"] { display: block; }
#e-ddg:checked ~ .pane-ddg { display: flex; }


/* =============================================================================
   动效层：进入动画、悬浮微交互、下拉淡入；一律尊重"减少动态效果"系统设置
   ============================================================================= */
:root {
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1);
  --dur-short: .18s;
  --dur-medium: .32s;
  --dur-long: .55s;
}

@keyframes k-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes k-pop {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* 首屏分层进入 */
.identity { animation: k-rise var(--dur-long) var(--ease-emphasized) both; }
.searchbox { animation: k-rise var(--dur-long) var(--ease-emphasized) .08s both; }
.links     { animation: k-rise var(--dur-long) var(--ease-emphasized) .16s both; }
.foot      { animation: k-rise var(--dur-long) var(--ease-emphasized) .24s both; }

/* 搜索框：聚焦时轻微上浮 */
.search-pane { transition: border-color var(--dur-short) var(--ease-standard),
                           box-shadow var(--dur-medium) var(--ease-standard),
                           transform var(--dur-medium) var(--ease-emphasized); }
.search-pane:focus-within { transform: translateY(-2px); }

/* 圆钮：悬浮放大、按下回弹 */
.eng-trigger, .search-go { transition: transform var(--dur-short) var(--ease-emphasized),
                                       border-color var(--dur-short) var(--ease-standard),
                                       background var(--dur-short) var(--ease-standard),
                                       filter var(--dur-short) var(--ease-standard); }
.eng-trigger:hover, .search-go:hover { transform: scale(1.06); }
.eng-trigger:active, .search-go:active { transform: scale(.94); }

/* 引擎下拉：淡入 + 下滑（用 visibility 代替 display，才能过渡） */
.eng-menu {
  display: block; visibility: hidden; opacity: 0;
  transform: translateY(-6px) scale(.98); transform-origin: top left;
  transition: opacity var(--dur-short) var(--ease-standard),
              transform var(--dur-medium) var(--ease-emphasized),
              visibility 0s linear var(--dur-short);
}
#eng-open:checked ~ .eng-picker .eng-menu {
  visibility: visible; opacity: 1; transform: none;
  transition: opacity var(--dur-short) var(--ease-standard),
              transform var(--dur-medium) var(--ease-emphasized),
              visibility 0s;
}
.eng-item { transition: background var(--dur-short) var(--ease-standard), color var(--dur-short) var(--ease-standard); }
.eng-item:active { transform: scale(.98); }

/* 入口与卡片：依次浮现 */
.entry { animation: k-pop var(--dur-medium) var(--ease-emphasized) both; }
.entry:nth-child(1) { animation-delay: .20s; }
.entry:nth-child(2) { animation-delay: .26s; }
.entry:nth-child(3) { animation-delay: .32s; }
.entry:nth-child(4) { animation-delay: .38s; }
.entry:hover { transform: translateY(-4px); }
.entry:active { transform: translateY(-1px) scale(.99); }

.post-card { animation: k-rise var(--dur-medium) var(--ease-emphasized) both; }
.post-card:nth-child(1) { animation-delay: .04s; }
.post-card:nth-child(2) { animation-delay: .09s; }
.post-card:nth-child(3) { animation-delay: .14s; }
.post-card:nth-child(4) { animation-delay: .19s; }
.post-card:nth-child(5) { animation-delay: .24s; }
.post-card:nth-child(6) { animation-delay: .29s; }
.post-card:nth-child(7) { animation-delay: .34s; }
.post-card:nth-child(8) { animation-delay: .39s; }
.post-card:nth-child(9) { animation-delay: .44s; }
.post-featured { animation-delay: 0s; }

.pager a, .pager span { transition: background var(--dur-short) var(--ease-standard),
                                    border-color var(--dur-short) var(--ease-standard),
                                    color var(--dur-short) var(--ease-standard),
                                    transform var(--dur-short) var(--ease-emphasized); }
.pager a:hover { transform: translateY(-2px); }
.back-chip { transition: border-color var(--dur-short) var(--ease-standard), color var(--dur-short) var(--ease-standard), background var(--dur-short) var(--ease-standard), transform var(--dur-short) var(--ease-emphasized); }
.back-chip:hover { transform: translateY(-1px); }

/* 无障碍：系统要求减少动态效果时，动画与过渡全部关掉 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0s !important;
    transition-duration: .001ms !important;
  }
}


/* --- 页脚小胶囊入口 --- */
.foot { flex-direction: column; gap: 12px; }
.foot-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.fp {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
  font-size: 13px; font-weight: 700; text-decoration: none;
  transition: transform var(--dur-short) var(--ease-emphasized),
              border-color var(--dur-short) var(--ease-standard),
              background var(--dur-short) var(--ease-standard),
              color var(--dur-short) var(--ease-standard);
  animation: k-pop var(--dur-medium) var(--ease-emphasized) both;
}
.fp img, .fp svg { width: 15px; height: 15px; object-fit: contain; }
.fp:nth-child(1) { animation-delay: .18s; }
.fp:nth-child(2) { animation-delay: .24s; }
.fp:nth-child(3) { animation-delay: .30s; }
.fp:nth-child(4) { animation-delay: .36s; }
.fp:hover {
  transform: translateY(-2px);
  border-color: var(--md-sys-color-primary);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}
.fp:active { transform: translateY(0) scale(.98); }
.foot-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }


/* =============================================================================
   下拉菜单 UI 重做（放在最后，直接覆盖上面的旧样式）
   ============================================================================= */
.eng-picker .eng-trigger { position: relative; }
#eng-open:checked ~ .eng-picker .eng-trigger { background: var(--md-sys-color-surface-container); }

.eng-menu {
  min-width: 236px; padding: 8px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--md-sys-color-surface-container-high) 94%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid var(--border-soft);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .16), 0 2px 6px rgba(0, 0, 0, .08);
}
.eng-menu::before {                       /* 菜单小标题 */
  content: '选择搜索引擎';
  display: block; padding: 4px 14px 9px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  color: var(--md-sys-color-on-surface-variant);
}
.eng-menu .eng-item {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  padding: 9px 34px 9px 11px; margin: 1px 0;
  border-radius: 999px;
  font-size: 14px; font-weight: 600;
  color: var(--md-sys-color-on-surface);
}
.eng-menu .eng-item img { width: 22px; height: 22px; flex: 0 0 auto; }
.eng-menu .eng-item:hover {
  background: color-mix(in srgb, var(--md-sys-color-primary) 10%, transparent);
  color: var(--md-sys-color-on-surface);
}
.eng-menu .eng-item::after {              /* 选中项：用 CSS 画的勾 */
  content: ''; position: absolute; right: 15px; top: 50%;
  width: 5px; height: 10px; margin-top: -7px;
  border: 2px solid currentColor; border-top: 0; border-left: 0;
  transform: rotate(45deg); opacity: 0;
  transition: opacity .16s var(--ease-standard);
}
#e-baidu:checked ~ .eng-picker .eng-menu .eng-item[for="e-baidu"] { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
#e-baidu:checked ~ .eng-picker .eng-menu .eng-item[for="e-baidu"]::after { opacity: 1; }
#e-bing:checked ~ .eng-picker .eng-menu .eng-item[for="e-bing"] { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
#e-bing:checked ~ .eng-picker .eng-menu .eng-item[for="e-bing"]::after { opacity: 1; }
#e-google:checked ~ .eng-picker .eng-menu .eng-item[for="e-google"] { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
#e-google:checked ~ .eng-picker .eng-menu .eng-item[for="e-google"]::after { opacity: 1; }
#e-sogou:checked ~ .eng-picker .eng-menu .eng-item[for="e-sogou"] { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
#e-sogou:checked ~ .eng-picker .eng-menu .eng-item[for="e-sogou"]::after { opacity: 1; }
#e-so360:checked ~ .eng-picker .eng-menu .eng-item[for="e-so360"] { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
#e-so360:checked ~ .eng-picker .eng-menu .eng-item[for="e-so360"]::after { opacity: 1; }
#e-ddg:checked ~ .eng-picker .eng-menu .eng-item[for="e-ddg"] { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
#e-ddg:checked ~ .eng-picker .eng-menu .eng-item[for="e-ddg"]::after { opacity: 1; }


/* --- 搜索框下方快捷方式 --- */
.shortcuts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 760px; }
.sc {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
  font-size: 13.5px; font-weight: 700; text-decoration: none;
  transition: transform var(--dur-short) var(--ease-emphasized), border-color var(--dur-short) var(--ease-standard),
              background var(--dur-short) var(--ease-standard), color var(--dur-short) var(--ease-standard);
  animation: k-pop var(--dur-medium) var(--ease-emphasized) both;
}
.sc img, .sc svg { width: 16px; height: 16px; object-fit: contain; flex: 0 0 auto; }
.sc:nth-child(1) { animation-delay: .14s; } .sc:nth-child(2) { animation-delay: .19s; }
.sc:nth-child(3) { animation-delay: .24s; } .sc:nth-child(4) { animation-delay: .29s; }
.sc:nth-child(5) { animation-delay: .34s; }
.sc:hover { transform: translateY(-3px); border-color: var(--md-sys-color-primary);
            background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.sc:active { transform: translateY(-1px) scale(.98); }


/* =============================================================================
   快捷方式（浏览器新标签页那种图标方块）+ 页脚（纯文字，贴在页面底部）
   ============================================================================= */
body.page-home { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.stage { width: 100%; }

.shortcuts { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 760px; }
.sc {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: 86px; padding: 6px 2px; text-decoration: none;
  color: var(--md-sys-color-on-surface-variant);
}
.sc-ic {
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 16px;
  background: var(--md-sys-color-surface-container);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-short) var(--ease-emphasized),
              border-color var(--dur-short) var(--ease-standard),
              background var(--dur-short) var(--ease-standard),
              box-shadow var(--dur-short) var(--ease-standard);
}
.sc-ic img, .sc-ic svg { width: 26px; height: 26px; object-fit: contain; display: block; }
.sc-name { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.sc:hover { color: var(--md-sys-color-on-surface); }
.sc:hover .sc-ic {
  transform: translateY(-4px);
  border-color: var(--md-sys-color-primary);
  background: var(--md-sys-color-primary-container);
  box-shadow: var(--shadow-hover);
}
.sc:active .sc-ic { transform: translateY(-1px) scale(.96); }
.sc { animation: k-pop var(--dur-medium) var(--ease-emphasized) both; }
.sc:nth-child(1) { animation-delay: .14s; } .sc:nth-child(2) { animation-delay: .19s; }
.sc:nth-child(3) { animation-delay: .24s; } .sc:nth-child(4) { animation-delay: .29s; }
.sc:nth-child(5) { animation-delay: .34s; }

/* 页脚：贴底、纯文字、无边框无底色 */
.foot {
  margin-top: auto; width: 100%; padding: 22px 20px 18px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  border-top: 0; font-size: 13px; color: var(--md-sys-color-on-surface-variant);
}
.foot-media, .foot-meta { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 0; }
.foot-label { font-weight: 700; color: var(--md-sys-color-on-surface); }
.foot a { color: var(--md-sys-color-on-surface-variant); text-decoration: none; font-weight: 600; }
.foot a:hover { color: var(--md-sys-color-primary); text-decoration: underline; }
.foot-meta { opacity: .85; }
.foot-pills { display: none; }             /* 旧的小胶囊已弃用 */


/* 让 .stage 撑满视口高度：主内容居中、页脚贴底 */
body.page-home { justify-content: stretch; }
.page-home .stage { flex: 1 1 auto; justify-content: center; min-height: 0; }
.page-home .foot { margin-top: auto; }
#e-pickcat:checked ~ .eng-picker .eng-logo[data-k="pickcat"] { display: block; }
#e-pickcat:checked ~ .pane-pickcat { display: flex; }
#e-pickcat:checked ~ .eng-picker .eng-menu .eng-item[for="e-pickcat"] { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
#e-pickcat:checked ~ .eng-picker .eng-menu .eng-item[for="e-pickcat"]::after { opacity: 1; }
#e-kitterhub:checked ~ .eng-picker .eng-logo[data-k="kitterhub"] { display: block; }
#e-kitterhub:checked ~ .pane-kitterhub { display: flex; }
#e-kitterhub:checked ~ .eng-picker .eng-menu .eng-item[for="e-kitterhub"] { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
#e-kitterhub:checked ~ .eng-picker .eng-menu .eng-item[for="e-kitterhub"]::after { opacity: 1; }


/* =============================================================================
   最终修正：主内容回到垂直居中；页脚绝对贴底；快捷方式方块干净化
   ============================================================================= */
.page-home .stage { position: relative; padding-bottom: 96px; justify-content: center; }
.page-home .foot {
  position: absolute; left: 0; right: 0; bottom: 0;
  margin-top: 0; padding: 18px 20px 16px; width: 100%;
}

/* 快捷方式：方圆形图标块，悬浮只做"抬起 + 描边变主题色"，不要圆形底色 */
.shortcuts .sc { background: transparent; border: 0; border-radius: 16px; overflow: visible; }
.shortcuts .sc:hover { background: transparent; }
.shortcuts .sc .sc-ic { border-radius: 16px; background: var(--md-sys-color-surface-container); }
.shortcuts .sc:hover .sc-ic {
  background: var(--md-sys-color-surface-container-high);
  border-color: var(--md-sys-color-primary);
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.shortcuts .sc:active .sc-ic { transform: translateY(-1px) scale(.96); }
.shortcuts .sc .sc-name { transition: color var(--dur-short) var(--ease-standard); }
.shortcuts .sc:hover .sc-name { color: var(--md-sys-color-primary); }
/* 键盘可达 */
.shortcuts .sc:focus-visible { outline: none; }
.shortcuts .sc:focus-visible .sc-ic { outline: 2px solid var(--md-sys-color-primary); outline-offset: 2px; }


/* 搜索按钮：图标 + 文字「搜索」（胶囊形，不再是纯圆点） */
.page-home .search-go {
  width: auto; min-width: 46px; height: 46px; padding: 0 20px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 15px; font-weight: 700;
}
.page-home .search-go::after { content: '搜索'; }
.page-home .search-go svg { flex: 0 0 auto; }
@media (max-width: 420px) {
  .page-home .search-go { padding: 0 14px; gap: 6px; font-size: 14px; }
}


/* 搜索框提示语：长文案时字号略收，避免撑破胶囊 */
.page-home .search-input { font-size: 16.5px; }
.page-home .search-input::placeholder { font-size: 16px; }
@media (max-width: 480px) { .page-home .search-input::placeholder { font-size: 14.5px; } }
#e-bilibili:checked ~ .eng-picker .eng-logo[data-k="bilibili"] { display: block; }
#e-bilibili:checked ~ .pane-bilibili { display: flex; }
#e-bilibili:checked ~ .eng-picker .eng-menu .eng-item[for="e-bilibili"] { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
#e-bilibili:checked ~ .eng-picker .eng-menu .eng-item[for="e-bilibili"]::after { opacity: 1; }


/* =============================================================================
   下拉菜单自适应：整体压缩，且高度永不超过视口（不产生页面滚动条）
   ============================================================================= */
.eng-menu {
  padding: 6px;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  overscroll-behavior: contain;      /* 在菜单内滚动时不要带动页面 */
  scrollbar-width: thin;
  scrollbar-color: var(--md-sys-color-outline-variant) transparent;
}
.eng-menu::-webkit-scrollbar { width: 6px; }
.eng-menu::-webkit-scrollbar-thumb { background: var(--md-sys-color-outline-variant); border-radius: 999px; }
.eng-menu::-webkit-scrollbar-track { background: transparent; }

.eng-menu::before { padding: 2px 12px 6px; font-size: 11px; }
.eng-menu .eng-item {
  padding: 6px 30px 6px 10px; margin: 0;
  font-size: 13.5px; line-height: 1.35;
}
.eng-menu .eng-item img { width: 19px; height: 19px; }
.eng-menu .eng-item::after { right: 13px; width: 4px; height: 8px; margin-top: -6px; }

/* 矮屏（笔记本 768 高、或更矮）再压一档，保证 9 项也放得下 */
@media (max-height: 760px) {
  .eng-menu { max-height: calc(100vh - 150px); }
  .eng-menu .eng-item { padding: 5px 28px 5px 9px; font-size: 13px; }
  .eng-menu .eng-item img { width: 18px; height: 18px; }
  .eng-menu::before { padding: 1px 11px 4px; font-size: 10.5px; }
}

/* 首页本身不出现滚动条 */
body.page-home { overflow: hidden; }


/* =============================================================================
   搜索框与引擎圆钮联动：焦点/悬浮时两边一起进入高亮状态
   ============================================================================= */
.eng-trigger { transition: background var(--dur-short) var(--ease-standard),
                           transform var(--dur-short) var(--ease-emphasized),
                           box-shadow var(--dur-short) var(--ease-standard); }

/* 搜索框被聚焦、或鼠标停在搜索框上 → 引擎圆钮一起高亮 */
.searchbox:has(.search-pane:focus-within) .eng-trigger,
.searchbox:has(.search-pane:hover) .eng-trigger {
  background: var(--md-sys-color-primary-container);
  transform: scale(1.06);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .10);
}

/* 鼠标停在引擎圆钮上 → 搜索框也跟着高亮（描边变主题色 + 抬起） */
.searchbox:has(.eng-trigger:hover) .search-pane {
  border-color: var(--md-sys-color-primary);
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

/* 下拉展开时：圆钮保持高亮（用 ID 选择器，压过之前的规则） */
#eng-open:checked ~ .eng-picker .eng-trigger {
  background: var(--md-sys-color-primary-container);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .10);
}

/* 不支持的浏览器（老版本）也不会变形：上面都只是增强 */


/* 圆钮自身被悬浮时，也用同一套高亮（覆盖早期那条灰色底） */
.searchbox:has(.eng-trigger:hover) .eng-trigger {
  background: var(--md-sys-color-primary-container);
  transform: scale(1.06);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .10);
}


/* =============================================================================
   暗色模式：搜索框的层次与对比度专项优化
   （M3 里输入框应比页面底色"略亮"，而不是更暗；深色下边框也要更清楚）
   ============================================================================= */
@media (prefers-color-scheme: dark) {
  body.page-home .search-pane {
    background: #171b20;                                  /* 比页面 #101418 略亮，形成层次 */
    border-color: color-mix(in srgb, var(--md-sys-color-outline) 45%, transparent);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 8px 22px rgba(0, 0, 0, .38);
  }
  body.page-home .search-input { color: #eef1f5; }
  body.page-home .search-input::placeholder { color: #a9b1bb; opacity: 1; }

  /* 聚焦：主色描边 + 一圈柔和光晕，深色下更容易看出焦点在哪 */
  body.page-home .search-pane:focus-within {
    border-color: var(--md-sys-color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent),
                0 8px 22px rgba(0, 0, 0, .38);
  }

  /* 引擎圆钮：未高亮时给一点点描边，深色下才看得出是个按钮 */
  body.page-home .eng-trigger { border: 0; }
  body.page-home .eng-trigger:not(:hover) { box-shadow: none; }
  .searchbox:not(:has(.search-pane:focus-within)):not(:has(.search-pane:hover)) .eng-trigger {
    background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
  }

  /* 搜索按钮：深色下主色偏亮，用深字保证对比 */
  body.page-home .search-go { color: var(--md-sys-color-on-primary); font-weight: 700; }

  /* 下拉菜单：边框更实、层次更清楚 */
  .eng-menu {
    background: #22262b;
    border-color: color-mix(in srgb, var(--md-sys-color-outline) 38%, transparent);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .4);
  }
  .eng-menu::before { color: #9aa3ae; }
  .eng-menu .eng-item { color: #e6e9ee; }
}


/* =============================================================================
   引擎 LOGO：不加任何自身特效，只跟随搜索框的状态（覆盖前面所有自带 hover/缩放/阴影）
   ============================================================================= */
.searchbox .eng-trigger,
.searchbox .eng-trigger:hover,
.searchbox:has(.eng-trigger:hover) .eng-trigger,
#eng-open:checked ~ .eng-picker .eng-trigger {
  transform: none;
  box-shadow: none;
  background: transparent;
}

/* 只有"搜索框进入高亮"时，LOGO 跟着换底色——不做位移、不做缩放、不加阴影 */
.searchbox:has(.search-pane:focus-within) .eng-trigger,
.searchbox:has(.search-pane:hover) .eng-trigger {
  transform: none;
  box-shadow: none;
  background: var(--md-sys-color-primary-container);
}

/* 深色模式下未高亮时的那点浅色底也取消 */
@media (prefers-color-scheme: dark) {
  .searchbox .eng-trigger,
  .searchbox:not(:has(.search-pane:focus-within)):not(:has(.search-pane:hover)) .eng-trigger {
    background: transparent;
    box-shadow: none;
  }
}


/* =============================================================================
   搜索框不要上下位移：任何状态都保持原位，只保留描边/阴影的变化
   ============================================================================= */
.page-home .search-pane,
.page-home .search-pane:hover,
.page-home .search-pane:focus-within,
.searchbox:has(.search-pane:hover) .search-pane,
.searchbox:has(.eng-trigger:hover) .search-pane {
  transform: none !important;
}

/* 搜索按钮也不做放大/位移，只留下压感（按下时轻微回缩） */
.page-home .search-go,
.page-home .search-go:hover { transform: none; }
.page-home .search-go:active { transform: scale(.98); }


/* =============================================================================
   引擎 LOGO：背景永远透明——任何状态都不出现蓝色底（聚焦 / 悬浮 / 下拉展开都不行）
   ============================================================================= */
.page-home .eng-trigger,
.page-home .eng-trigger:hover,
.page-home .eng-trigger:active,
.searchbox:has(.search-pane:focus-within) .eng-trigger,
.searchbox:has(.search-pane:hover) .eng-trigger,
.searchbox:has(.eng-trigger:hover) .eng-trigger,
#eng-open:checked ~ .eng-picker .eng-trigger {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}