/* ============================================================
 * 全站共用样式：顶栏 + 艺术字 Logo
 *
 * 为什么必须是 <head> 里的静态 <link>（以前是 common.js 注入的）：
 * 浏览器会等外链样式表加载完才画第一帧，所以这里的样式一定在首帧就生效。
 * 而 common.js 在每页 body 末尾，由它注入就是"先画一帧没样式的顶栏、再跳一下"：
 * 首帧顶栏只有 41px 高、背景透明、右上角空空，下一帧才变成 68px 深色栏 +
 * 两颗胶囊 + 用户区，整页随之往下蹿 28px、搜索框横移 113px。
 * 改这两块样式只在本文件里改，别再去页面 <style> 或 JS 里抄第二份。
 * ============================================================ */

/* ---------- 艺术字 Logo（中文部分粉紫渐变 + 微光，结尾拉丁字母蓝紫斜体） ---------- */
.logo-main {
  background: linear-gradient(120deg, #ffc2d4 0%, #ff7ba9 40%, #e879f9 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  font-weight: 900; letter-spacing: .08em;
  filter: drop-shadow(0 0 14px rgba(255, 123, 169, .35));
  animation: logo-shine 6s ease-in-out infinite;
}
.logo-sub {
  margin-left: 3px; font-size: .78em; font-weight: 700; font-style: italic; letter-spacing: .04em;
  background: linear-gradient(120deg, #a5b4fc, #60a5fa);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
@keyframes logo-shine {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}

/* ---------- 顶栏 ----------
 * 高度固定在 .header-inner 上；每个页面的顶栏容器都必须是 max-w-6xl，
 * 否则右上角那排按钮的右边缘对不齐（历史上在 948~1256px 之间跳）。 */
.site-header { background: rgba(14, 16, 20, .78); border-color: rgba(255, 255, 255, .08); }
.header-inner { height: 68px; }

.nav-pill {
  display: flex; align-items: center; gap: .375rem;
  padding: .375rem .75rem; border-radius: 999px;
  font-size: .75rem; font-weight: 600; white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .05);
  color: #d1d5db;
  transition: color .15s, border-color .15s, background-color .15s;
}
.nav-pill:hover { color: #fff; border-color: rgba(233, 155, 183, .5); background: rgba(255, 255, 255, .08); }
.nav-pill.on { color: #fff; border-color: rgba(233, 155, 183, .55); background: rgba(233, 155, 183, .14); }

/* ---------- 首帧骨架 ----------
 * ⚠️ 骨架只能用这里（或页面 <style> 里）的普通 CSS，不能套 Tailwind 类：
 * Tailwind 是 CDN 运行时扫 DOM 生成的，首帧未必已经有那段样式，骨架会塌成 0 高、等于没占位。
 * .sk-b 是全站共用的灰条原子（尺寸写在使用处的行内 style），外层容器样式各页自己定义。 */
/* 必须是 block：这些灰条多数直接放在普通块容器里（.sk-body / .sk-post），
 * 用 inline-block 会并排排成一行而不是上下堆叠；放在 flex 容器里时 block 也照常工作。 */
.auth-sk, .sk-b {
  display: block; background: rgba(255, 255, 255, .07);
  animation: sk-pulse 1.6s ease-in-out infinite;
}
@keyframes sk-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }