/* ============================================================
   CrossKit 性能 & 体验增强样式 (perf-ux.css)
   - 离线横幅
   - CLS 预留：导航额度胶囊、首页收藏网格等动态注入元素的占位空间
   - 图片默认防偏移
   ============================================================ */

/* ---------- 离线横幅 ---------- */
#ckOfflineBar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10005;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  background: linear-gradient(135deg, #f5576c 0%, #f093fb 100%);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
  transform: translateY(-100%);
  transition: transform 0.25s ease;
  pointer-events: none;
}
#ckOfflineBar.show { transform: translateY(0); }
#ckOfflineBar i { font-size: 14px; }
/* 离线横幅出现时不挡住固定导航；给 body 顶部留白由 JS 不需要，横幅覆盖在 navbar 之上即可 */
@media (max-width: 768px) {
  #ckOfflineBar { font-size: 12.5px; padding: 8px 10px; }
}

/* ---------- CLS 预留：导航额度胶囊 ---------- */
/* account-ux.js 登录后在导航栏右侧注入额度胶囊，预留最小宽度避免布局跳动 */
.navbar-right { min-height: 40px; }
.nav-quota-pill {
  /* 注入元素自身不应引起文档流宽度突变：给定最小宽度 + 内联弹性 */
  min-width: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---------- CLS 预留：首页收藏网格 ---------- */
/* 登录后「我的常用工具」网格可能异步渲染，预留高度避免下方内容跳动 */
#hp-favorites .ck-fav-grid:empty::before {
  content: '';
  display: block;
  min-height: 120px;
}
#hp-favorites .ck-fav-grid { min-height: 1px; }

/* ---------- 图片防偏移默认值 ---------- */
/* 任何未显式声明尺寸的 <img> 默认占位，避免加载后推挤布局 */
img {
  max-width: 100%;
  height: auto;
}
img:not([width]):not([height]) {
  /* 兜底：未给尺寸的图片先占一个稳定比例，加载后不剧烈跳动 */
  min-height: 1px;
}