/* ===== am首页5 预览 · 共享样式 ===== */
@font-face {
  font-family: 'SF Pro';
  src: url('../assets/fonts/SF-Pro.woff2') format('woff2'), url('../assets/fonts/SF-Pro.ttf') format('truetype');
  font-weight: 400 700;
}
@font-face {
  font-family: 'SF Pro';
  src: url('../assets/fonts/SF-Pro-Italic.woff2') format('woff2'), url('../assets/fonts/SF-Pro-Italic.ttf') format('truetype');
  font-style: italic;
  font-weight: 400 700;
}
@font-face {
  font-family: 'Seymour One';
  src: url('../assets/fonts/SeymourOne.ttf') format('truetype');
  font-weight: 400;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: 'SF Pro', -apple-system, BlinkMacSystemFont, sans-serif;
  background: #000;
  color: #1c2024;
}

.screen {
  width: 402px;
  min-height: 100vh;
  margin: 0 auto;
  position: relative;
  overflow-x: hidden;
  background: #fff;
}

img { display: block; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; border: 0; background: none; cursor: pointer; }

/* ---- 状态栏 ---- */
.statusbar {
  position: absolute; top: 0; left: 0; right: 0; height: 50px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 27px 0 32px; z-index: 60; pointer-events: none;
  color: #fff;
}
.statusbar .sb-time { font-size: 17px; font-weight: 600; letter-spacing: .2px; }
.statusbar .sb-icons { display: flex; align-items: center; gap: 7px; }

/* ---- 吸顶头部（滚后变白） ---- */
.sticky-head { position: sticky; top: 0; z-index: 50; transition: background-color .25s ease; }
.sticky-head.scrolled { background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.06); }
.sticky-head.scrolled .statusbar { color: #1c2024; }

/* ---- 底部 Tab Bar ---- */
.tabbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 402px; height: 83px; background: #fff; z-index: 55;
  display: flex;
}
.tabbar .tab-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: #5e656c; transition: transform .12s ease, color .2s ease; position: relative;
}
.tabbar .tab-item:active { transform: scale(.9); }
.tabbar .tab-item.active { color: #1c2024; }
.tabbar .tab-item svg { width: 28px; height: 28px; }
.tabbar .tab-label { font-size: 10px; line-height: 12px; }
.tabbar .home-indicator {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 134px; height: 5px; border-radius: 3px; background: #1c2024; opacity: .9;
}

/* ---- 悬浮按钮 ---- */
.fab {
  position: fixed; z-index: 56; right: max(16px, calc(50% - 185px)); bottom: 99px;
  width: 48px; height: 48px; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  transition: transform .12s ease;
}
.fab:active { transform: scale(.88); }

/* ---- Toast ---- */
.toast {
  position: fixed; left: 50%; bottom: 120px; transform: translateX(-50%) translateY(20px);
  background: rgba(28,32,36,.92); color: #fff; font-size: 13px;
  padding: 10px 18px; border-radius: 21px; z-index: 99;
  opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease;
  white-space: nowrap;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- 按压反馈 ---- */
.pressable { transition: transform .12s ease, opacity .12s ease; }
.pressable:active { transform: scale(.96); opacity: .85; }

/* 横滑容器：禁选中/禁拖拽 ghost，保证鼠标拖拽顺滑 */
.dragscroll { user-select: none; -webkit-user-select: none; }
.dragscroll img { -webkit-user-drag: none; }