/* ===== 全局动画增强 ===== */

/* 页面背景渐变 + 呼吸 */
.page {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 30%, #fafbfc 100%);
  transition: background 1s ease;
}

/* 帖子卡片增强动画 */
.post-card {
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
  border-radius: 8px;
  position: relative;
}
.post-card:hover {
  background: linear-gradient(135deg, #f8fafc, #f0f9ff) !important;
  transform: translateX(2px);
  box-shadow: 0 2px 12px rgba(14,165,233,0.06);
  border-bottom-color: rgba(14,165,233,0.15) !important;
}
.post-card:active {
  transform: scale(0.985);
  transition: all 0.1s ease !important;
}

/* pending 卡片动画增强 */
.post-card.pending {
  border-radius: 14px !important;
  margin: 6px 0 !important;
  background: linear-gradient(135deg, #f0f9ff 0%, #ecfdf5 50%, #f0f9ff 100%) !important;
  background-size: 200% 100% !important;
  animation: pendingShimmerBg 2.5s ease-in-out infinite !important;
  border-bottom: 1px solid rgba(186,230,253,0.6) !important;
  box-shadow: 0 2px 16px rgba(14,165,233,0.08);
}
@keyframes pendingShimmerBg {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}
.post-card.pending::after {
  background: linear-gradient(90deg, transparent, rgba(14,165,233,0.08), transparent) !important;
  animation: pendingShimmer 2s ease-in-out infinite;
}

/* FAB 按钮动画增强 */
.fab {
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important;
  box-shadow: 0 4px 20px rgba(14,165,233,0.2), 0 2px 8px rgba(0,0,0,0.1) !important;
}
.fab:hover {
  transform: translateY(-3px) scale(1.05) !important;
  box-shadow: 0 8px 30px rgba(14,165,233,0.35), 0 4px 12px rgba(0,0,0,0.12) !important;
}
.fab:active {
  transform: scale(0.92) !important;
  transition: all 0.1s ease !important;
}

/* 标签按钮动画 */
.tag-btn {
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
  position: relative;
  overflow: hidden;
}
.tag-btn::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at center, rgba(14,165,233,0.15), transparent);
  opacity: 0; transition: opacity 0.3s;
}
.tag-btn:hover::after { opacity: 1; }
.tag-btn:hover { transform: translateY(-1px); }
.tag-btn:active { transform: scale(0.94); }
.tag-btn.active {
  box-shadow: 0 2px 8px rgba(14,165,233,0.15);
  transform: translateY(-1px);
}

/* 分区切换按钮动画 */
.channel-item {
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
  position: relative;
}
.channel-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.channel-item:active { transform: scale(0.95); }
.channel-item.active {
  box-shadow: 0 2px 8px rgba(14,165,233,0.12);
}

/* 投票按钮动画 */
.vote-btn {
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.vote-btn:hover {
  transform: scale(1.1);
}
.vote-btn:active {
  transform: scale(0.85);
  transition: all 0.08s ease !important;
}

/* 帖子缩略图 hover */
.post-thumb img {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.post-thumb:hover img {
  transform: scale(1.08);
}
.post-thumb:active img {
  transform: scale(0.96);
  transition: transform 0.1s ease;
}

/* 头像 hover */
.post-avatar {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.post-avatar:hover {
  transform: scale(1.08) rotate(-3deg);
}

/* 帖子标签微交互 */
.post-meta .tag {
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease;
  cursor: default;
}
.post-meta .tag:hover {
  transform: translateY(-1px) scale(1.06);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* 分区徽章微交互 */
.channel-badge {
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s ease;
}
.channel-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.12);
}

/* 帖子操作按钮 hover（非删除） */
.post-action-btn:not(.post-action-del) {
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.post-action-btn:not(.post-action-del):hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  background: rgba(14, 165, 233, 0.06);
  border-color: rgba(14, 165, 233, 0.2);
}

/* 删除按钮 hover 强化 */
.post-action-del {
  transition: all 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.post-action-del:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.12);
}

/* 底部 Action Sheet 按钮 hover */
.action-sheet .sheet-btn:hover {
  background: rgba(14, 165, 233, 0.04);
  transform: translateX(4px);
}
.action-sheet .sheet-btn.danger:hover {
  background: rgba(239, 68, 68, 0.05);
}
.action-sheet .sheet-cancel:hover {
  background: #e5e7eb;
}

/* 弹窗动画增强 */
.modal-overlay.show .modal {
  animation: modalPopIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes modalPopIn {
  from { opacity: 0; transform: translateY(30px) scale(0.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Toast 动画由 index.html 原有的 .toast.show 控制，此处不覆盖 */

/* 分区组标题动画 */
.channel-group-header {
  animation: sectionFadeIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes sectionFadeIn {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: translateX(0); }
}

/* 分区标题小图标 hover 发光 */
.channel-group-title .group-icon {
  transition: box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.channel-group-title:hover .group-icon {
  box-shadow: 0 0 10px rgba(14, 165, 233, 0.4);
  transform: scaleY(1.3);
}

/* 展开全部分区面板 — 左侧抽屉卡片动效 */
.expand-ch-grid {
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.expand-ch-grid:hover {
  transform: translateX(4px);
}

/* 管理菜单退出按钮 hover */
.manage-item-leave {
  transition: all 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.manage-item-leave:hover {
  transform: scale(1.05);
}

/* 分区管理快捷按钮 hover */
.channel-manage-btn {
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 公告关闭按钮 active 增强 */
.popup-notice-close {
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.popup-notice-close:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.3);
}
.popup-notice-close:active {
  transform: scale(0.95);
}

/* 免责声明确认按钮 hover */
.disclaimer-confirm-btn {
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.disclaimer-confirm-btn:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.3);
}

/* 分区管理面板按钮 hover */
.channel-manage-panel .cmp-btn {
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.channel-manage-panel .cmp-btn:hover {
  background: #e0f2fe;
  transform: translateX(3px);
}
.channel-manage-panel .cmp-btn.danger:hover {
  background: #fef2f2;
}

/* 禁言选项按钮 hover */
.mute-opt {
  transition: all 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.mute-opt:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.mute-opt:active {
  transform: scale(0.96);
}

/* 回复/取消按钮 hover 增强 */
.mute-cancel {
  transition: all 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.mute-cancel:hover {
  transform: translateY(-1px);
}

/* 分区标签栏 tab hover 增强 */
.tab {
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.tab:hover {
  transform: translateY(-1px);
}

/* 帖子摘要 hover 微小缩进 */
.post-excerpt {
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.post-card:hover .post-excerpt {
  transform: translateX(2px);
}

/* 管理菜单项 hover 平滑 */
.manage-item {
  transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 输入框 focus 动画 */
input[type="text"], textarea, input[type="email"], input[type="password"] {
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
input[type="text"]:focus, textarea:focus {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(14,165,233,0.1), 0 0 0 3px rgba(14,165,233,0.08);
  border-color: #0ea5e9;
}

/* 分页按钮动画 */
.pagination button, .pagination a {
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.pagination button:hover, .pagination a:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(14,165,233,0.12);
}
.pagination button:active, .pagination a:active {
  transform: scale(0.9);
}

/* 按钮全局（排除 admin 的 btn-* 和 sidebar-*，保留原有样式） */
button:not(.bar):not(.pending-badge *):not([class*="btn-"]):not(.sidebar-item) {
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
button:active:not(.bar):not(.pending-badge *):not([class*="btn-"]):not(.sidebar-item) {
  transform: scale(0.94);
  transition: all 0.08s ease;
}

/* 链接 hover */
a:not(.no-anim) {
  transition: color 0.2s, opacity 0.2s;
}

/* 滚动条美化 */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #cbd5e1, #94a3b8);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: #64748b; }

/* ================================================================
   统一加载动画系统 — Loader System v2
   设计灵感：Notion 温暖极简 + Framer 动感精准
   包含：情书折叠动画、呼吸渐变圆点、优雅骨架屏
   ================================================================ */

/* --- Keyframes --- */
@keyframes loaderLetterFold {
  0%   { transform: rotateX(90deg); opacity: 0; }
  30%  { transform: rotateX(-10deg); opacity: 1; }
  50%  { transform: rotateX(5deg); }
  70%  { transform: rotateX(-2deg); }
  100% { transform: rotateX(0deg); opacity: 1; }
}
@keyframes loaderEnvelopeFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%  { transform: translateY(-6px) rotate(1deg); }
  75%  { transform: translateY(3px) rotate(-1deg); }
}
@keyframes loaderBreathPulse {
  0%, 100% { transform: scale(0.95); opacity: 0.6; }
  50%  { transform: scale(1.05); opacity: 1; }
}
@keyframes loaderDotWave {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.3; }
  30%  { transform: translateY(-8px); opacity: 1; }
}
@keyframes loaderShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes loaderFadeSlideUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes loaderGradientFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes loaderRingSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes loaderRingSpinReverse {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

/* ===== 通用加载容器 ===== */
.loader-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 20px;
  gap: 24px;
  animation: loaderFadeSlideUp 0.5s cubic-bezier(0.22,1,0.36,1) both;
}

/* ==========================================
   方案一：情书折叠 — 页面级加载（帖子列表）
   一封淡蓝色信封折叠展开，呼应"情书"主题
   ========================================== */
.loader-heartbeat {
  position: relative;
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  perspective: 120px;
}
/* 信封主体 */
.loader-heartbeat .core {
  width: 44px; height: 30px;
  background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 50%, #7dd3fc 100%);
  border-radius: 4px 4px 2px 2px;
  position: relative; z-index: 2;
  animation: loaderLetterFold 1.6s cubic-bezier(0.22,1,0.36,1) infinite;
  transform-origin: top center;
  box-shadow: 0 4px 16px rgba(14,165,233,0.12), 0 1px 3px rgba(14,165,233,0.08);
}
/* 信封封口三角 */
.loader-heartbeat .core::before {
  content: '';
  position: absolute;
  top: -8px; left: 0; right: 0;
  width: 0; height: 0;
  margin: 0 auto;
  border-left: 22px solid transparent;
  border-right: 22px solid transparent;
  border-bottom: 10px solid #bae6fd;
  filter: drop-shadow(0 1px 1px rgba(14,165,233,0.15));
}
/* 信纸横线 */
.loader-heartbeat .core::after {
  content: '';
  position: absolute;
  top: 8px; left: 8px; right: 8px; bottom: 6px;
  background: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 3px,
    rgba(14,165,233,0.15) 3px,
    rgba(14,165,233,0.15) 4px
  );
  border-radius: 1px;
}
/* 外层光环 */
.loader-heartbeat .ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: rgba(14,165,233,0.3);
  border-right-color: rgba(56,189,248,0.2);
  animation: loaderRingSpin 1.8s linear infinite;
}
.loader-heartbeat .ring2 {
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  border-bottom-color: rgba(14,165,233,0.15);
  border-left-color: rgba(56,189,248,0.1);
  animation: loaderRingSpinReverse 2.4s linear infinite;
}
.loader-text {
  font-size: 14px;
  color: #64748b;
  font-weight: 500;
  letter-spacing: 0.3px;
  animation: loaderBreathPulse 2s ease-in-out infinite;
}

/* ==========================================
   方案二：呼吸渐变圆点 — 轻量级加载
   ========================================== */
.loader-dots {
  display: flex; align-items: center; gap: 6px;
}
.loader-dots .dot {
  width: 8px; height: 8px;
  background: #0ea5e9;
  border-radius: 50%;
  animation: loaderDotWave 1.2s ease-in-out infinite;
}
.loader-dots .dot:nth-child(2) {
  animation-delay: 0.15s;
  background: #38bdf8;
}
.loader-dots .dot:nth-child(3) {
  animation-delay: 0.3s;
  background: #7dd3fc;
}

/* ==========================================
   方案三：双环旋转 — 科技感加载（玩家查询等）
   ========================================== */
.loader-orbit {
  position: relative;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
}
.loader-orbit .core {
  width: 10px; height: 10px;
  background: linear-gradient(135deg, #0ea5e9, #38bdf8);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(14,165,233,0.3);
}
.loader-orbit .satellite {
  position: absolute;
  width: 6px; height: 6px;
  background: #7c3aed;
  border-radius: 50%;
  animation: loaderRingSpin 1.4s linear infinite;
  transform-origin: 24px 24px;
  top: 21px; left: 21px;
}
.loader-orbit .satellite:nth-child(2) {
  animation-duration: 1.8s;
  animation-direction: reverse;
  background: #f59e0b;
}

/* ==========================================
   方案四：优雅骨架屏 — 帖子列表占位
   ========================================== */
.skeleton-card {
  background: #fff;
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 10px;
  border: 1px solid rgba(0,0,0,0.04);
  overflow: hidden;
  animation: loaderFadeSlideUp 0.4s cubic-bezier(0.22,1,0.36,1) both;
}
.skeleton-card:nth-child(1) { animation-delay: 0s; }
.skeleton-card:nth-child(2) { animation-delay: 0.06s; }
.skeleton-card:nth-child(3) { animation-delay: 0.12s; }
.skeleton-card:nth-child(4) { animation-delay: 0.18s; }
.skeleton-card:nth-child(5) { animation-delay: 0.24s; }

.skeleton-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
}
.skeleton-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(110deg, #f1f5f9 30%, #e8f0fe 50%, #f1f5f9 70%);
  background-size: 200% 100%;
  animation: loaderShimmer 2s ease-in-out infinite;
}
.skeleton-line {
  height: 12px; border-radius: 6px;
  background: linear-gradient(110deg, #f1f5f9 30%, #e8f0fe 50%, #f1f5f9 70%);
  background-size: 200% 100%;
  animation: loaderShimmer 2s ease-in-out infinite;
}
.skeleton-line.short { width: 40%; }
.skeleton-line.medium { width: 65%; }
.skeleton-line.long { width: 85%; }
.skeleton-line + .skeleton-line { margin-top: 8px; }

.skeleton-body { margin-bottom: 14px; }

.skeleton-footer {
  display: flex; gap: 20px;
}
.skeleton-footer .skeleton-line {
  width: 60px; height: 10px;
}

/* ==========================================
   方案五：渐变流光条 — 管理后台等
   ========================================== */
.loader-gradient-bar {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #0ea5e9, #38bdf8, #7dd3fc, #38bdf8, #0ea5e9);
  background-size: 200% 100%;
  animation: loaderGradientFlow 2s ease infinite;
  margin-top: 12px;
  opacity: 0.7;
}
.loader-gradient-bar.fast { animation-duration: 1s; }

/* ===== 紧凑型内联加载（用于小区域） ===== */
.loader-inline {
  display: inline-flex; align-items: center; gap: 8px;
}
.loader-inline .loader-dots { gap: 4px; }
.loader-inline .loader-dots .dot { width: 6px; height: 6px; }
.loader-inline .loader-text { font-size: 12px; animation: none; }

/* ===== 响应式 ===== */
@media (max-width: 640px) {
  .loader-wrap { padding: 40px 16px; gap: 18px; }
  .loader-heartbeat { width: 56px; height: 56px; }
  .loader-heartbeat .core { width: 38px; height: 26px; }
  .loader-heartbeat .core::before {
    border-left-width: 19px; border-right-width: 19px;
    border-bottom-width: 8px; top: -7px;
  }
  .loader-text { font-size: 13px; }
  .skeleton-card { padding: 14px 16px; border-radius: 12px; }
  .skeleton-avatar { width: 34px; height: 34px; }
  .skeleton-line { height: 10px; }
}

/* ================================================================
   现代简化内联图标系统 — Inline Icon System
   将 emoji / 符号字符统一替换为 Lucide 风格 SVG 线图标
   ================================================================ */
.icon-inline {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  vertical-align: middle;
}
.icon-inline svg {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  color: currentColor;
  stroke-width: 2;
}
.icon-inline.icon-xs   { font-size: 12px; }
.icon-inline.icon-sm   { font-size: 14px; }
.icon-inline.icon-md   { font-size: 16px; }
.icon-inline.icon-lg   { font-size: 20px; }
.icon-inline.icon-xl   { font-size: 24px; }

/* 独立图标（不含文字） */
.icon-only {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.icon-only svg {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  color: currentColor;
  stroke-width: 2;
}

/* 按钮 / 标签内的图标对齐 */
button .icon-inline,
button .icon-only,
.label .icon-inline,
.badge .icon-inline,
.tabs-actions-label .icon-inline {
  vertical-align: -0.15em;
}

/* 警告色图标 */
.icon-warn { color: #f59e0b; }
.icon-danger { color: #dc2626; }
.icon-success { color: #16a34a; }
.icon-info { color: #0ea5e9; }

/* ================================================================
   图标动效系统 — Icon Animation System
   为 SVG 线图标提供精致的微交互动效
   ================================================================ */

/* 通用图标 hover — 微缩放 + 色彩过渡 */
.icon-inline svg,
.icon-only svg {
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 按钮内图标 hover 微弹跳 */
button:hover .icon-inline svg,
button:hover .icon-only svg {
  transform: scale(1.1);
}

/* 铃铛脉冲动画 — 有通知感但不刺眼 */
@keyframes iconBellRing {
  0%, 100% { transform: rotate(0); }
  10% { transform: rotate(8deg); }
  20% { transform: rotate(-6deg); }
  30% { transform: rotate(4deg); }
  40% { transform: rotate(-2deg); }
  50% { transform: rotate(0); }
}
.icon-bell-anim svg {
  animation: iconBellRing 2s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  transform-origin: top center;
}
.icon-bell-anim:hover svg {
  animation: iconBellRing 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: top center;
}

/* 地球慢速旋转 */
@keyframes iconGlobeSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.icon-globe-anim svg {
  animation: iconGlobeSpin 12s linear infinite;
}
.icon-globe-anim:hover svg {
  animation: iconGlobeSpin 2s linear infinite;
}

/* 锁 hover 解锁微感 */
@keyframes iconLockBounce {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-1.5px); }
  60% { transform: translateY(0.5px); }
}
.icon-lock-anim:hover svg {
  animation: iconLockBounce 0.4s ease;
}

/* 文件夹 hover 微微张开 */
.icon-folder-anim:hover svg {
  transform: scale(1.08) rotate(-2deg);
}

/* 回形针 hover 旋转 */
.icon-clip-anim:hover svg {
  transform: rotate(-12deg) scale(1.08);
}

/* 保存软盘 hover 下压 */
.icon-save-anim:active svg {
  transform: scale(0.9);
}

/* 通用入场动画 — 图标首次出现时淡入上移 */
@keyframes iconFadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.icon-enter {
  animation: iconFadeUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* 分区面板 section label 图标动效 */
.expand-ch-section-label .icon-inline svg {
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.expand-ch-section-label:hover .icon-inline svg {
  transform: scale(1.2);
  color: #0ea5e9;
}