/* ShortVideo base shell styles. Extracted from index.html during frontend split stage 1. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body, .feed, .video-item, .nav-bar, button, img, video {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
input, textarea, select, [contenteditable="true"], .edit-panel, .json-editor-wrap, .pub-modal input, .pub-modal textarea {
  user-select: text;
  -webkit-user-select: text;
  -webkit-touch-callout: default;
}
input[type="file"], button, .act-btn, .nav-item, .episode-picker-card, .liked-card {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
button, .act-btn, .nav-item, .progress-wrap, .landscape-info-panel { -webkit-tap-highlight-color: transparent; }
body {
  background: #000; color: #fff;
  font-family: -apple-system, 'PingFang SC', sans-serif;
  height: 100dvh; overflow: hidden;
  display: flex; flex-direction: column;
}

/* ── 导航 ── */
.nav-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; justify-content: center; gap: 26px;
  padding: 12px 0 8px;
  background: linear-gradient(to bottom, rgba(0,0,0,.65), transparent);
  pointer-events: none;
}
.nav-bar > * { pointer-events: all; }
.nav-item {
  color: rgba(255,255,255,.5); font-size: 13px; font-weight: 500;
  cursor: pointer; padding-bottom: 3px; transition: color .2s;
  user-select: none;
}
.nav-item.active { color: #fff; border-bottom: 1.5px solid #fff; }

/* ── Feed 容器（推荐 + 喜欢各一个） ── */
.feed-wrap { flex: 1; position: relative; overflow: hidden; }

.feed {
  position: absolute; inset: 0;
  overflow-y: scroll; scroll-snap-type: y mandatory;
  scrollbar-width: none;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  transition: opacity .25s;
}
.feed::-webkit-scrollbar { display: none; }
.feed.hidden { display: none !important; opacity: 0; pointer-events: none; }
.feed.is-dragging, .feed.is-settling { scroll-snap-type: none; scroll-behavior: auto; }
.feed.is-dragging .video-item, .feed.is-settling .video-item { backface-visibility: hidden; }
@media (hover: hover) and (pointer: fine) {
  .feed { cursor: grab; user-select: none; }
  .feed.is-dragging { cursor: grabbing; }
}
/* ── 加载遮罩 ── */
.loading {
  position: fixed; inset: 0; background: #000; z-index: 200;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 14px;
  font-size: 14px; color: rgba(255,255,255,.55);
}
.loading.hide { display: none; }
.spinner { width: 34px; height: 34px; border: 3px solid rgba(255,255,255,.1); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; }

/* ── 错误提示 ── */
.error-bar {
  position: fixed; top: 60px; left: 50%; transform: translateX(-50%);
  background: #ff4757; color: #fff; padding: 8px 18px;
  border-radius: 20px; font-size: 13px; display: none; z-index: 300; white-space: nowrap;
}
.error-bar.show { display: block; }

.episode-tip {
  position: fixed; top: 62px; left: 50%; transform: translateX(-50%);
  z-index: 260; background: rgba(0,0,0,.68); color: #fff;
  border: 1px solid rgba(255,255,255,.12); border-radius: 999px;
  padding: 6px 13px; font-size: 12px; pointer-events: none;
  opacity: 0; transition: opacity .18s; max-width: 78vw;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.episode-tip.show { opacity: 1; }
.next-coll-btn {
  position: fixed; right: 14px; top: 118px; z-index: 120;
  display: none; align-items: center; gap: 4px;
  background: rgba(0,0,0,.48); color: rgba(255,255,255,.86);
  border: 1px solid rgba(255,255,255,.12); border-radius: 999px;
  padding: 7px 11px; font-size: 12px; cursor: pointer;
  backdrop-filter: blur(8px); pointer-events: all; opacity: .5;
  transition: opacity .18s, background .18s, color .18s;
}
.next-coll-btn.show { display: inline-flex; }
.next-coll-btn:hover { color: #fff; background: rgba(88,215,199,.2); }
.play-mode-btn {
  position: fixed; right: 14px; top: 160px; z-index: 120;
  display: none; align-items: center; gap: 4px;
  background: rgba(0,0,0,.48); color: rgba(255,255,255,.86);
  border: 1px solid rgba(255,255,255,.12); border-radius: 999px;
  padding: 7px 11px; font-size: 12px; cursor: pointer;
  backdrop-filter: blur(8px); pointer-events: all; opacity: .62;
  transition: opacity .18s, background .18s, color .18s;
}
.play-mode-btn.show { display: inline-flex; }
.play-mode-btn.shuffle { color: #9bf4ea; background: rgba(88,215,199,.18); border-color: rgba(88,215,199,.3); opacity: .85; }
.play-mode-btn:hover { color: #fff; background: rgba(88,215,199,.2); opacity: 1; }
.episode-select-btn {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); right: auto; top: auto; transform: translateX(-50%); z-index: 120;
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: rgba(0,0,0,.36); color: rgba(255,255,255,.82);
  border: 1px solid rgba(255,255,255,.12); border-radius: 999px;
  font-size: 22px; cursor: pointer;
  backdrop-filter: blur(8px); pointer-events: all; opacity: .5;
  transition: opacity .18s, background .18s, color .18s, transform .18s;
}
.episode-select-btn.show { display: inline-flex; }
.episode-select-btn:hover { opacity: 1; color: #fff; background: rgba(88,215,199,.2); transform: translateX(-50%) translateY(-1px); }
.episode-select-btn span { display: none; }
/* ── PIN 登录遮罩 ── */
.pin-overlay {
  position: fixed; inset: 0; background: #000; z-index: 400;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px;
}
.pin-overlay.show { display: flex; }
.pin-box {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  width: 100%; max-width: 280px;
}
.pin-box .pin-title { font-size: 17px; color: #fff; font-weight: 500; }
.pin-box .pin-input {
  width: 100%; text-align: center;
  background: #1c1c1e; border: 1px solid rgba(255,255,255,.12); border-radius: 12px;
  color: #fff; font-size: 22px; letter-spacing: 8px; padding: 14px 12px; outline: none;
}
.pin-box .pin-input:focus { border-color: #ff4757; }
.pin-box .pin-btn {
  width: 100%; background: #ff4757; color: #fff; border: none;
  border-radius: 12px; padding: 14px; font-size: 16px; font-weight: 500; cursor: pointer;
}
.pin-box .pin-btn:disabled { opacity: .5; }
.pin-box .pin-err { font-size: 13px; color: #ff4757; min-height: 16px; }