/* =========================================================
   苏岩站 - 动效系统 anim.css
   独立文件：想彻底关闭动画，删掉 header.php 里的这一行 link 即可
   全部动效遵循 prefers-reduced-motion，用户系统设置里关掉即自动停用
   ========================================================= */

/* ---------- 动效变量 ---------- */
:root {
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-in-out: cubic-bezier(.65, .05, .36, 1);
  --ease-back: cubic-bezier(.34, 1.42, .64, 1);
  --d-fast: .16s;
  --d: .28s;
  --d-slow: .5s;
}

/* 尊重系统「减少动态效果」设置 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   一、页面载入动画
   只有 html.js 存在时才隐藏初始状态 —— 万一脚本没跑，内容照常显示
   ========================================================= */
html.js [data-anim] { opacity: 0; }

/* 顶栏下滑 */
html.js .topbar {
  animation: barDrop .5s var(--ease-out) both;
}
@keyframes barDrop {
  from { opacity: 0; transform: translateY(-100%); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 通用上浮进入 */
html.js [data-anim="up"] {
  animation: fadeUp .55s var(--ease-out) both;
  animation-delay: calc(var(--dly, 0) * 1ms);
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

html.js [data-anim="left"] {
  animation: fadeLeft .55s var(--ease-out) both;
  animation-delay: calc(var(--dly, 0) * 1ms);
}
@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: translateX(0); }
}

html.js [data-anim="right"] {
  animation: fadeRight .55s var(--ease-out) both;
  animation-delay: calc(var(--dly, 0) * 1ms);
}
@keyframes fadeRight {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: translateX(0); }
}

html.js [data-anim="scale"] {
  animation: popIn .5s var(--ease-back) both;
  animation-delay: calc(var(--dly, 0) * 1ms);
}
@keyframes popIn {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: scale(1); }
}

/* 滚动进场：由 JS 加 .reveal，视口内加 .in */
html.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
html.js .reveal.in {
  opacity: 1;
  transform: none;
}

/* 左侧导航、页脚依次进场 */
html.js .side-nav a { animation: fadeLeft .45s var(--ease-out) both; }
html.js .side-nav a:nth-child(1) { animation-delay: .06s; }
html.js .side-nav a:nth-child(2) { animation-delay: .12s; }
html.js .side-nav a:nth-child(3) { animation-delay: .18s; }
html.js .side-nav a:nth-child(4) { animation-delay: .24s; }
html.js .side-nav a:nth-child(5) { animation-delay: .30s; }
html.js .side-nav a:nth-child(6) { animation-delay: .36s; }
html.js .side-nav a:nth-child(7) { animation-delay: .42s; }

html.js .footer-inner { animation: fadeUp .5s var(--ease-out) .1s both; }

/* =========================================================
   二、悬停微交互
   ========================================================= */

/* 卡片浮起 */
.card {
  transition: transform var(--d) var(--ease-out),
              box-shadow var(--d) var(--ease-out),
              border-color var(--d) var(--ease-out);
}
.card.hoverable:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(16,18,24,.05), 0 14px 34px rgba(16,18,24,.08);
  border-color: var(--line-2);
}

/* 微博卡片按下 */
.post { transition: transform var(--d-fast) var(--ease-out), box-shadow var(--d) var(--ease-out); }
.post:active { transform: scale(.995); }

/* 列表项背景渐入 */
.list-item, .news-item, .rec-user, .notice-item, .comment {
  transition: background var(--d-fast) var(--ease-out), padding-left var(--d) var(--ease-out);
}
.rec-user:hover, .list-item:hover { background: #fcfcfd; }

/* 头像：放大 + 描边 */
.avatar-wrap, .avatar, .side-user img, .rec-user img, .notice-item img, .comment img {
  transition: transform var(--d) var(--ease-back), box-shadow var(--d) var(--ease-out);
}
.avatar-wrap:hover .avatar,
.side-user:hover img,
.rec-user:hover img {
  transform: scale(1.07);
}
.avatar-wrap:hover .avatar { box-shadow: 0 0 0 2px rgba(47,107,255,.35); }

/* 按钮 */
.btn {
  position: relative;
  overflow: hidden;
  transition: transform var(--d-fast) var(--ease-out),
              box-shadow var(--d) var(--ease-out),
              background var(--d) var(--ease-out),
              color var(--d) var(--ease-out),
              opacity var(--d) var(--ease-out);
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.35) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform .6s var(--ease-out);
}
.btn:hover::after { transform: translateX(120%); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(16,18,24,.2); }
.btn-ghost:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.97); }
.btn[disabled] { pointer-events: none; transition: opacity var(--d) var(--ease-out); }

/* 按钮加载中：转圈 */
.btn.loading { pointer-events: none; color: transparent !important; }
.btn.loading::before {
  content: '';
  position: absolute;
  width: 15px; height: 15px;
  top: 50%; left: 50%;
  margin: -7.5px 0 0 -7.5px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: #fff;
  animation: spin .7s linear infinite;
}
.btn-ghost.loading::before, .btn-danger.loading::before { color: var(--text-2); }
@keyframes spin { to { transform: rotate(360deg); } }

/* 链接下划线扫入 */
.topnav a, .side-nav a, .footer a, .settings-nav a { position: relative; }
.topnav a::after, .footer a::after, .settings-nav a::after {
  content: '';
  position: absolute;
  left: 10px; right: 10px; bottom: 4px;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d) var(--ease-out);
}
.topnav a:hover::after, .footer a:hover::after, .settings-nav a:hover::after {
  transform: scaleX(1);
}
.topnav a.on::after { transform: scaleX(1); opacity: .35; }

/* 搜索框聚焦：边框游走 */
.search input {
  transition: background var(--d) var(--ease-out),
              border-color var(--d) var(--ease-out),
              box-shadow var(--d) var(--ease-out);
}
.search input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(47,107,255,.12);
  animation: focusPop .35s var(--ease-back);
}
@keyframes focusPop {
  0% { transform: scale(1); }
  55% { transform: scale(1.015); }
  100% { transform: scale(1); }
}
.search .icon { transition: color var(--d) var(--ease-out), transform var(--d) var(--ease-back); }
.search:focus-within .icon { color: var(--accent); transform: scale(1.12); }

/* 侧边导航图标 */
.side-nav .icon { transition: transform var(--d) var(--ease-back); }
.side-nav a:hover .icon { transform: scale(1.16) rotate(-4deg); }
.side-nav a.on .icon { animation: iconIn .45s var(--ease-back); }
@keyframes iconIn {
  0% { transform: scale(.5) rotate(-20deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* 站点 Logo 呼吸 */
.brand-mark { transition: transform var(--d) var(--ease-back); }
.brand:hover .brand-mark { animation: logoSpin .7s var(--ease-out); }
@keyframes logoSpin {
  0% { transform: rotate(0) scale(1); }
  40% { transform: rotate(-12deg) scale(1.12); }
  100% { transform: rotate(0) scale(1); }
}

/* 未读消息小圆点：呼吸 + 扩散 */
.topnav a .dot {
  animation: dotPulse 1.9s var(--ease-in-out) infinite;
}
@keyframes dotPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,77,106,.5); }
  50% { transform: scale(1.18); box-shadow: 0 0 0 4px rgba(255,77,106,0); }
}

/* =========================================================
   三、微博卡片动作条
   ========================================================= */
.act {
  position: relative;
  overflow: visible;
  transition: background var(--d-fast) var(--ease-out),
              color var(--d) var(--ease-out),
              transform var(--d-fast) var(--ease-back);
}
.act .icon { transition: transform var(--d) var(--ease-back); }
.act:hover { transform: translateY(-1px); }
.act:hover .icon { transform: scale(1.22); }
.act:active { transform: scale(.94); }

/* 点赞 */
.act-like.liked { animation: likePop .45s var(--ease-back); }
@keyframes likePop {
  0% { transform: scale(1); }
  35% { transform: scale(1.28); }
  60% { transform: scale(.92); }
  100% { transform: scale(1); }
}
.act-like.liked .icon { fill: var(--like); stroke: var(--like); }

/* 点赞爱心飞出 */
.hearts { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.hearts i {
  position: absolute;
  left: 50%; top: 50%;
  font-size: 15px;
  color: var(--like);
  opacity: 0;
  animation: heartUp .85s var(--ease-out) forwards;
}
.hearts i:nth-child(1) { --hx: -16px; --hy: -34px; }
.hearts i:nth-child(2) { --hx: 14px;  --hy: -40px; font-size: 12px; animation-delay: .06s; }
.hearts i:nth-child(3) { --hx: 2px;   --hy: -48px; font-size: 10px; animation-delay: .12s; }
@keyframes heartUp {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--hx)), var(--hy)) scale(1.15) rotate(var(--rot, 12deg)); }
}

/* 转发图标转一圈 */
.act-repost:hover .icon { animation: repostSpin .5s var(--ease-out); }
@keyframes repostSpin {
  from { transform: rotate(0); }
  to { transform: rotate(180deg); }
}

/* 评论图标轻弹 */
.act-cmt:hover .icon { animation: cmtBeat .45s var(--ease-back); }
@keyframes cmtBeat {
  0% { transform: scale(1); }
  40% { transform: scale(1.3); }
  70% { transform: scale(.94); }
  100% { transform: scale(1); }
}

/* 数字跳动 */
.act b { display: inline-block; transition: transform var(--d) var(--ease-back); }
.act.bump b { animation: numBump .4s var(--ease-back); }
@keyframes numBump {
  0% { transform: translateY(0); }
  40% { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}

/* 删除：红色抖动 */
.act-del:hover { animation: shake .4s var(--ease-in-out); }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-3px); }
  40% { transform: translateX(3px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}

/* 删除微博：整卡塌陷 */
.post.removing {
  animation: collapse .32s var(--ease-in-out) forwards;
  pointer-events: none;
}
@keyframes collapse {
  to { opacity: 0; transform: scale(.92); max-height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: -14px; }
}

/* =========================================================
   四、标签页
   ========================================================= */
.tabs {
  position: relative;
  animation: fadeUp .5s var(--ease-out) both;
}
.tabs a {
  position: relative;
  overflow: hidden;
  transition: color var(--d) var(--ease-out), transform var(--d-fast) var(--ease-out);
}
/* 直接动效改 background，不叠加伪元素层，避免盖住文字 */
.tabs a {
  transition: transform var(--d) var(--ease-out),
              background-color var(--d) var(--ease-out),
              color var(--d) var(--ease-out),
              box-shadow var(--d) var(--ease-out);
}
.tabs a:hover { transform: translateY(-1px); background: #f2f4f7; }
.tabs a.on { box-shadow: 0 4px 14px rgba(16,18,24,.16); }

/* 手机端：标签多时横向滚动，防止「评论」这类双字被压成竖排。
   放在 anim.css 是因为本文件在 style.css 之后加载，需要再声明一次覆盖。 */
@media (max-width: 720px) {
  .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs a,
  .tabs a.on {
    flex: 0 0 auto;
    white-space: nowrap;
    min-width: 62px;
    padding: 9px 14px;
  }
}

/* 头像标签页切换 */
.tabs a.on { animation: tabPop .4s var(--ease-back); }
@keyframes tabPop {
  0% { transform: scale(.95); }
  100% { transform: scale(1); }
}

/* =========================================================
   五、右侧榜单 / 列表
   ========================================================= */
.topic-rank a, .settings-nav a {
  transition: background var(--d-fast) var(--ease-out),
              transform var(--d) var(--ease-out),
              padding-left var(--d) var(--ease-out);
}
.topic-rank a:hover { transform: translateX(4px); }
.tr-no { transition: transform var(--d) var(--ease-back), color var(--d) var(--ease-out); }
.topic-rank a:hover .tr-no { transform: scale(1.25); color: var(--like); }
.tr-title { transition: color var(--d) var(--ease-out); }
.topic-rank a:hover .tr-title { color: var(--accent); }

/* 热度标签轻微跳动 */
.hot-tag { animation: tagBob 2.6s var(--ease-in-out) infinite; }
@keyframes tagBob {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-1.5px) rotate(-1.5deg); }
}

/* 关注按钮 */
.btn.act[data-act="follow"] { transition: transform var(--d) var(--ease-back), background var(--d) var(--ease-out); }
.btn.act[data-act="follow"].done { animation: donePulse .45s var(--ease-back); }
@keyframes donePulse {
  0% { transform: scale(1); }
  45% { transform: scale(1.14); }
  100% { transform: scale(1); }
}

/* =========================================================
   六、发布框
   ========================================================= */
.side-post {
  animation: fadeUp .5s var(--ease-out) .04s both;
  transition: border-color var(--d) var(--ease-out), box-shadow var(--d) var(--ease-out);
}
.side-post:focus-within {
  border-color: var(--line-2);
  box-shadow: 0 2px 4px rgba(16,18,24,.04), 0 14px 34px rgba(16,18,24,.09);
}
.side-post textarea { transition: opacity var(--d) var(--ease-out); }
.ico-btn { transition: background var(--d-fast) var(--ease-out), color var(--d) var(--ease-out), transform var(--d) var(--ease-back); }
.ico-btn:hover { transform: scale(1.12) rotate(-6deg); }
.ico-btn:active { transform: scale(.94); }

/* 字数计数器接近上限时脉冲 */
.counter.warn { animation: warnPulse 1.1s var(--ease-in-out) infinite; }
.counter.over { animation: overShake .4s var(--ease-in-out) infinite; }
@keyframes warnPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}
@keyframes overShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}

/* @ 提示下拉 */
.mention-list .mi { animation: fadeUp .22s var(--ease-out) both; }
.mention-list .mi:nth-child(2) { animation-delay: .04s; }
.mention-list .mi:nth-child(3) { animation-delay: .08s; }
.mention-list .mi:nth-child(4) { animation-delay: .12s; }
.mention-list .mi:nth-child(5) { animation-delay: .16s; }
.mention-list .mi:nth-child(6) { animation-delay: .2s; }

/* 图片九宫格逐个淡入 */
.pics img { animation: imgIn .5s var(--ease-out) both; }
.pics img:nth-child(1) { animation-delay: .02s; }
.pics img:nth-child(2) { animation-delay: .07s; }
.pics img:nth-child(3) { animation-delay: .12s; }
.pics img:nth-child(4) { animation-delay: .17s; }
.pics img:nth-child(5) { animation-delay: .22s; }
.pics img:nth-child(6) { animation-delay: .27s; }
.pics img:nth-child(7) { animation-delay: .32s; }
.pics img:nth-child(8) { animation-delay: .37s; }
.pics img:nth-child(9) { animation-delay: .42s; }
@keyframes imgIn {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}
/* 图片悬停轻微放大 */
.pics img { transition: transform var(--d-slow) var(--ease-out), filter var(--d) var(--ease-out); }
.pics img:hover { transform: scale(1.03); filter: brightness(1.02); }

/* 引用原微博 */
.origin-quote { animation: fadeRight .45s var(--ease-out) both; transition: background var(--d) var(--ease-out); }
.origin-quote:hover { background: #f2f4f7; }

/* =========================================================
   七、提示条 / 弹层
   ========================================================= */
.flash {
  animation: flashIn .4s var(--ease-back) both;
}
@keyframes flashIn {
  from { opacity: 0; transform: translate(-50%, -18px) scale(.94); }
  to   { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
.flash.out { animation: flashOut .3s var(--ease-in-out) both; }
@keyframes flashOut {
  to { opacity: 0; transform: translate(-50%, -14px) scale(.96); }
}
/* 静态位置变体（详情页/表单内）不走居中位移 */
.flash[style*="position:static"] { animation: fadeUp .4s var(--ease-out) both; }

/* 灯箱：淡入 + 图片缩放 */
.lightbox { opacity: 0; transition: opacity var(--d) var(--ease-out); }
.lightbox.on { opacity: 1; }
.lightbox img {
  transform: scale(.94);
  opacity: 0;
  transition: transform .35s var(--ease-back), opacity .3s var(--ease-out);
}
.lightbox.on img { transform: scale(1); opacity: 1; }

/* =========================================================
   八、Toast（替代 alert）
   ========================================================= */
.toast-wrap {
  position: fixed;
  left: 50%; bottom: 40px;
  transform: translateX(-50%);
  z-index: 400;
  display: grid;
  gap: 8px;
  justify-items: center;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border-radius: 12px;
  background: var(--brand);
  color: #fff;
  font-size: 14px;
  box-shadow: 0 12px 34px rgba(16,18,24,.2);
  animation: toastIn .38s var(--ease-back) both;
}
.toast.out { animation: toastOut .28s var(--ease-in-out) forwards; }
.toast-err { background: #d63a56; }
.toast-ok  { background: #1f9254; }
.toast .ti { width: 17px; height: 17px; flex: none; }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(22px) scale(.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toastOut {
  to { opacity: 0; transform: translateY(10px) scale(.94); }
}

/* =========================================================
   九、自定义确认框 / 转发框
   ========================================================= */
.overlay {
  position: fixed;
  inset: 0;
  /* 需要盖过后台弹窗（.amask z-index:500），否则嵌套确认框不可见 */
  z-index: 600;
  background: rgba(16,18,24,.32);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--d) var(--ease-out), visibility var(--d);
}
.overlay.on { opacity: 1; visibility: visible; }

.dialog {
  width: 100%;
  max-width: 400px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(16,18,24,.24);
  transform: translateY(18px) scale(.95);
  opacity: 0;
  transition: transform .34s var(--ease-back), opacity .26s var(--ease-out);
  overflow: hidden;
}
.overlay.on .dialog { transform: translateY(0) scale(1); opacity: 1; }
.dialog-body { padding: 22px 22px 8px; }
.dialog-title { font-size: 17px; font-weight: 700; margin: 0 0 6px; }
.dialog-text { font-size: 14.5px; color: var(--text-2); margin: 0; line-height: 1.6; }
.dialog textarea {
  width: 100%;
  min-height: 96px;
  margin-top: 12px;
  padding: 11px 13px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  font: inherit;
  font-size: 14.5px;
  resize: vertical;
  outline: none;
  transition: border-color var(--d) var(--ease-out), box-shadow var(--d) var(--ease-out);
}
.dialog textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(47,107,255,.1);
}
.dialog-foot {
  display: flex;
  gap: 9px;
  justify-content: flex-end;
  padding: 16px 22px 20px;
}
.dialog .ico-danger {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: #fff1f3;
  color: var(--like);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
  animation: popIn .4s var(--ease-back) both;
}
.dialog .ico-danger svg { width: 21px; height: 21px; }

/* =========================================================
   十、详情页 / 评论区
   ========================================================= */
.detail-post { animation: fadeUp .5s var(--ease-out) both; }
.detail-text { animation: fadeUp .6s var(--ease-out) .08s both; }
.comment-box:focus-within { background: #fdfdfe; transition: background var(--d) var(--ease-out); }
.comment { animation: fadeLeft .4s var(--ease-out) both; transition: background var(--d-fast) var(--ease-out); }
.comment:hover { background: #fcfcfd; }
.c-del { transition: color var(--d) var(--ease-out), transform var(--d-fast) var(--ease-back); }
.c-del:hover { transform: scale(1.1); }

/* =========================================================
   十一、用户主页
   ========================================================= */
.profile-cover {
  background-size: 200% 100%;
  animation: coverIn .8s var(--ease-out) both,
             coverShift 14s linear infinite;
}
@keyframes coverIn {
  from { opacity: 0; transform: scale(1.06); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes coverShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.profile-top .avatar { animation: popIn .55s var(--ease-back) .12s both; }
.profile-id h1 { animation: fadeLeft .5s var(--ease-out) .18s both; }
.profile-id .ph { animation: fadeLeft .5s var(--ease-out) .24s both; }
.profile-bio { animation: fadeUp .5s var(--ease-out) .28s both; }
.profile-stats { animation: fadeUp .5s var(--ease-out) .34s both; }
.profile-stats span b { display: inline-block; transition: transform var(--d) var(--ease-back); }
.profile-stats span:hover b { transform: scale(1.2); color: var(--accent); }
.profile-actions { animation: fadeUp .5s var(--ease-out) .4s both; }

/* =========================================================
   十二、管理后台
   ========================================================= */
.table tbody tr {
  transition: background var(--d-fast) var(--ease-out);
  animation: fadeLeft .4s var(--ease-out) both;
}
.table tbody tr:nth-child(1) { animation-delay: .02s; }
.table tbody tr:nth-child(2) { animation-delay: .05s; }
.table tbody tr:nth-child(3) { animation-delay: .08s; }
.table tbody tr:nth-child(4) { animation-delay: .11s; }
.table tbody tr:nth-child(5) { animation-delay: .14s; }
.table tbody tr:nth-child(6) { animation-delay: .17s; }
.table tbody tr:nth-child(7) { animation-delay: .2s; }
.table tbody tr:nth-child(8) { animation-delay: .23s; }
.table tbody tr:nth-child(9) { animation-delay: .26s; }
.table tbody tr:nth-child(10) { animation-delay: .29s; }
.table tbody tr:nth-child(11) { animation-delay: .32s; }
.table tbody tr:nth-child(12) { animation-delay: .35s; }
.table tbody tr:nth-child(n+13) { animation-delay: .38s; }
.table tbody tr:hover { background: #fcfcfd; }
.table tbody tr:hover td img { transform: scale(1.1); }
.table tbody tr td img { transition: transform var(--d) var(--ease-back); }

/* 柱状图生长 */
.bar {
  transform-origin: bottom;
  animation: barGrow .8s var(--ease-out) both;
}
@keyframes barGrow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
/* 统计数字 */
.stat-box {
  animation: popIn .5s var(--ease-back) both;
  transition: transform var(--d) var(--ease-back), box-shadow var(--d) var(--ease-out);
}
.stat-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(16,18,24,.07);
  border-color: var(--line-2);
}

/* =========================================================
   十三、登录 / 注册页
   ========================================================= */
.auth-page { animation: fadeIn .4s var(--ease-out) both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.auth-brand { animation: fadeDown .55s var(--ease-out) both; }
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.auth-brand .brand-mark { animation: logoIn .7s var(--ease-back) both; }
@keyframes logoIn {
  0% { opacity: 0; transform: scale(.4) rotate(-25deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
.auth-card > form, .auth-card > .card { animation: fadeUp .55s var(--ease-out) .12s both; }
.auth-alt { animation: fadeUp .5s var(--ease-out) .22s both; }
.field { transition: background var(--d) var(--ease-out); }
.field:focus-within { background: #fdfdfe; }
.field-line { position: relative; }
.field-line::after {
  content: '';
  position: absolute;
  left: 16px; right: 16px; bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: center;
  border-radius: 2px;
  transition: transform var(--d) var(--ease-out);
}
.field-line:focus-within::after { transform: scaleX(1); }

/* =========================================================
   十四、分页 / 回到顶部
   ========================================================= */
.pager a, .pager span {
  transition: background var(--d-fast) var(--ease-out),
              transform var(--d) var(--ease-back),
              color var(--d) var(--ease-out);
}
.pager a:hover { transform: translateY(-2px) scale(1.06); }
.pager .on { animation: popIn .4s var(--ease-back) both; }

.to-top {
  position: fixed;
  right: 22px;
  bottom: 30px;
  z-index: 120;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: #fff;
  color: var(--text-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(16,18,24,.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.85);
  transition: opacity var(--d) var(--ease-out),
              transform var(--d) var(--ease-back),
              visibility var(--d),
              box-shadow var(--d) var(--ease-out);
}
.to-top.on { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.to-top:hover {
  box-shadow: 0 10px 26px rgba(16,18,24,.16);
  transform: translateY(-3px) scale(1.06);
  color: var(--text);
}
.to-top:active { transform: scale(.92); }
.to-top svg { width: 19px; height: 19px; }
.to-top.bump svg { animation: arrowUp .5s var(--ease-out); }
@keyframes arrowUp {
  0% { transform: translateY(4px); opacity: .4; }
  100% { transform: translateY(0); opacity: 1; }
}

/* 进度条（滚动进度） */
.scroll-bar {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  z-index: 60;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  transition: width .1s linear;
}

/* =========================================================
   十五、空状态
   ========================================================= */
.empty {
  animation: fadeIn .6s var(--ease-out) both;
  position: relative;
}
.empty::after {
  content: '';
  position: absolute;
  left: 50%; top: 42%;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  border: 2px solid var(--line);
  border-top-color: var(--text-3);
  opacity: 0;
}
.empty.busy::after { animation: spin .9s linear infinite; opacity: 1; }

/* =========================================================
   十六、加载骨架（导航跳转时）
   ========================================================= */
body.leaving main,
body.leaving .auth-card {
  animation: fadeOutFast .18s var(--ease-in-out) both;
}
@keyframes fadeOutFast {
  to { opacity: 0; transform: translateY(-6px); }
}

/* 链接点击涟漪：容器裁切，避免水波溢出 */
.btn, .pager a, .tabs a, .settings-nav a { overflow: hidden; }
.ripple {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  opacity: .16;
  transform: scale(0);
  pointer-events: none;
  animation: rippleOut .55s var(--ease-out) forwards;
}
@keyframes rippleOut {
  to { transform: scale(2.6); opacity: 0; }
}

/* =========================================================
   十七、移动端
   ========================================================= */
@media (max-width: 820px) {
  .to-top { right: 14px; bottom: 18px; width: 38px; height: 38px; }
  .toast-wrap { bottom: 24px; }
  html.js [data-anim="left"], html.js [data-anim="right"] { animation-name: fadeUp; }
}