/* ===== 蜜桃视频 · 前台官网 公共样式 ===== */
:root {
  --pink-50:  #fff0f3;
  --pink-100: #ffe4ec;
  --pink-200: #ffc2d6;
  --pink-300: #ff95b8;
  --pink-400: #ff6f99;
  --pink-500: #e82769;
  --pink-600: #d21b59;
  --pink-700: #a41645;
  --gray-50:  #f7f8fa;
  --gray-100: #eef0f3;
  --gray-200: #e3e5ea;
  --gray-300: #c9ccd4;
  --gray-400: #a0a3ad;
  --gray-500: #7a7e89;
  --gray-600: #52575f;
  --gray-700: #363a40;
  --gray-800: #1f2328;
  --green-500: #20c997;
  --amber-500: #f59e0b;
  --red-500:   #ef4444;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  --shadow-sm: 0 2px 6px rgba(0,0,0,.06);
  --shadow-md: 0 4px 14px rgba(0,0,0,.08);
  --shadow-lg: 0 10px 28px rgba(0,0,0,.12);
  --shadow-pink: 0 6px 18px rgba(232,39,105,.22);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; color: var(--gray-800); background: var(--gray-50); -webkit-font-smoothing: antialiased; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body { min-height: 100vh; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
img { max-width: 100%; display: block; }

/* ================== PC 端容器 ================== */
.container { width: 1200px; max-width: 94%; margin: 0 auto; }
.hide-pc { display: none !important; }
.hide-mb { display: block; }

/* ================== 顶部导航（PC） ================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--gray-100);
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.site-header .top-bar { display: flex; align-items: center; gap: 24px; height: 68px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 22px; color: var(--pink-500); }
.logo-icon { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--pink-400), var(--pink-600)); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; }
.nav-links { display: flex; gap: 6px; margin-left: 16px; }
.nav-links a { padding: 8px 14px; border-radius: 999px; color: var(--gray-700); font-weight: 600; font-size: 14px; }
.nav-links a:hover { background: var(--pink-50); color: var(--pink-500); }
.nav-links a.active { background: var(--pink-500); color: #fff; }
.top-search { flex: 1; max-width: 460px; margin-left: auto; }
.search-bar { display: flex; align-items: center; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 999px; padding: 8px 12px 8px 14px; }
.search-bar input { flex: 1; border: none; outline: none; background: transparent; font-size: 14px; color: var(--gray-800); min-width: 0; }
.search-bar button { background: var(--pink-50); color: var(--pink-600); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 700; border: 1px solid var(--pink-200); transition: all .2s; flex-shrink: 0; }
.search-bar button:hover { background: var(--pink-100); }
.top-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 16px; border-radius: 999px; font-weight: 700; font-size: 14px; transition: all .15s; flex-shrink: 0; position: relative; }
.btn-pink { background: linear-gradient(135deg, var(--pink-400), var(--pink-600)); color: #fff; box-shadow: var(--shadow-pink); }
.btn-pink:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(232,39,105,.3); }
.btn-ghost { background: var(--gray-50); color: var(--gray-700); }
.btn-ghost:hover { background: var(--gray-100); }
.btn-outline { border: 1.5px solid var(--pink-300); color: var(--pink-500); background: #fff; }
.btn-outline:hover { background: var(--pink-50); }
.avatar-btn { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg,var(--pink-200),var(--pink-400)); color: #fff; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; overflow: hidden; text-align: center; line-height: 1; flex-shrink: 0; letter-spacing: 0; user-select: none; }
.lang-switch {
  padding: 8px 14px; border-radius: 999px;
  border: 1.5px solid var(--pink-300);
  font-size: 13px; color: var(--pink-600);
  background: var(--pink-50);
  font-weight: 700; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 5px;
  cursor: pointer; transition: all .2s;
  box-shadow: 0 1px 4px rgba(232,39,105,.12);
}
.lang-switch:hover {
  background: var(--pink-100); border-color: var(--pink-400);
  transform: translateY(-1px); box-shadow: 0 3px 10px rgba(232,39,105,.2);
}
.lang-switch .lang-flag { font-size: 15px; line-height: 1; }
.lang-switch .lang-name { font-weight: 800; }
.lang-switch .lang-caret { font-size: 9px; opacity: .7; }

/* 语言下拉菜单 */
.lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 120px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  border: 1px solid var(--gray-100);
  padding: 6px;
  z-index: 1000;
  display: none;
  animation: langMenuIn .15s ease-out;
}
.lang-menu.show { display: block; }
@keyframes langMenuIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.lang-item {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-700);
  cursor: pointer;
  transition: all .15s;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.lang-item:hover {
  background: var(--pink-50);
  color: var(--pink-600);
}
.lang-item.active {
  background: var(--pink-100);
  color: var(--pink-600);
}
.msg-btn {
  padding: 8px 16px !important;
  border: 1.5px solid var(--gray-300) !important;
  color: var(--gray-800) !important;
  background: #fff !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  border-radius: 999px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  transition: all .25s cubic-bezier(.4,0,.2,1);
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  overflow: visible;
}
.msg-btn:hover {
  background: var(--gray-50) !important;
  border-color: var(--gray-400) !important;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0,0,0,.12);
}
.msg-btn:active {
  transform: translateY(0) scale(.97);
}
.msg-btn .msg-ic {
  font-size: 15px; line-height: 1;
  transition: transform .3s;
}
.msg-btn:hover .msg-ic {
  animation: msg-bounce .6s ease;
}
@keyframes msg-bounce {
  0%, 100% { transform: translateY(0) rotate(0); }
  30% { transform: translateY(-3px) rotate(-8deg); }
  60% { transform: translateY(0) rotate(6deg); }
}
/* 消息红点徽标 */
.msg-btn .badge {
  top: -6px; right: -6px;
  min-width: 22px; height: 22px;
  font-size: 13px; font-weight: 900;
  line-height: 22px;
  padding: 0 6px;
  background: #ff3b5c;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(255,59,92,.5);
  animation: badge-pulse 2s ease-in-out infinite;
}
@keyframes badge-pulse {
  0%, 100% { box-shadow: 0 1px 4px rgba(255,59,92,.5), 0 0 0 0 rgba(255,59,92,.45); }
  50% { box-shadow: 0 1px 4px rgba(255,59,92,.5), 0 0 0 6px rgba(255,59,92,0); }
}
.badge { position: absolute; top: -3px; right: -2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--pink-500); color: #fff; font-size: 10px; font-weight: 800; line-height: 18px; text-align: center; border: 2px solid #fff; z-index: 2; display: inline-flex; align-items: center; justify-content: center; }
.msg-btn, .admin-entry, .publish-btn { position: relative; }

/* ================== 页面主体 ================== */
main.page-wrap { padding: 24px 0 60px; min-height: calc(100vh - 68px); }
main.page-wrap.page-primary { padding-top: 4px; }
.section-title { display: flex; align-items: baseline; justify-content: space-between; margin: 18px 0 14px; }
.section-title h2 { margin: 0; font-size: 20px; color: var(--gray-800); font-weight: 800; }
.section-title .more-link { color: var(--pink-500); font-weight: 700; font-size: 13px; }

/* ================== 返回头部（← 返回 + 标题） ================== */
.back-header { display: flex; align-items: center; gap: 14px; padding: 14px 0 18px; margin-bottom: 6px; }
.back-btn, .coll-back {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  cursor: pointer; flex-shrink: 0;
  transition: all .18s cubic-bezier(.4,0,.2,1);
}
.back-btn svg, .coll-back svg { display: block; }
.back-btn:hover, .coll-back:hover {
  background: rgba(0,0,0,.55);
  border-color: rgba(255,255,255,.3);
  transform: scale(1.06);
}
.back-btn:active, .coll-back:active { transform: scale(.92); }
.back-title { font-size: 21px; font-weight: 800; color: var(--gray-800); line-height: 1.3; }

/* ================== 卡片网格 · 视频（PC 4列 / 平板3 / 移动2） ================== */
.video-grid { display: flex; flex-direction: column; gap: 18px; }
.video-card { display: flex; flex-direction: column; background: #fff; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); transition: all .2s; cursor: pointer; }
.video-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.video-card .cover { position: relative; width: 100%; aspect-ratio: 16/9; background: linear-gradient(135deg, var(--pink-300), var(--pink-500)); flex-shrink: 0; }
.video-card .cover.c2 { background: linear-gradient(135deg,#818cf8,#6366f1); }
.video-card .cover.c3 { background: linear-gradient(135deg,#fbbf24,#f97316); }
.video-card .cover.c4 { background: linear-gradient(135deg,#34d399,#0ea5e9); }
.video-card .cover.c5 { background: linear-gradient(135deg,#fb7185,#c084fc); }
.video-card .cover.c6 { background: linear-gradient(135deg,#22d3ee,#3b82f6); }
.video-card .cover.c1 { background: linear-gradient(135deg,#fda4af,#e82769); }
.video-card .cover .view-count { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.65); color: #fff; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; }
.video-card .cover .duration { position: absolute; left: 8px; bottom: 8px; background: rgba(0,0,0,.65); color: #fff; padding: 3px 7px; border-radius: 6px; font-size: 11px; }
.video-card .cover .media-type-badge { position: absolute; left: 8px; bottom: 8px; background: rgba(0,0,0,.65); color: #fff; padding: 3px 7px; border-radius: 6px; font-size: 11px; font-weight: 700; }
.video-card .meta { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.video-card .meta .title { font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--gray-800); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.video-card .meta .desc { font-size: 12px; color: var(--gray-500); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.video-card .meta .row { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; font-size: 12px; color: var(--gray-500); gap: 8px; flex-wrap: wrap; }
.video-card .meta .author { display: flex; align-items: center; gap: 6px; font-weight: 500; color: var(--gray-600); }
.video-card .meta .author .av { width: 22px; height: 22px; border-radius: 50%; background: var(--pink-300); color: #fff; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.video-card .meta .stats { display: flex; align-items: center; gap: 10px; }

/* ================== 合集卡片（首页 2 列 / 全部合集 1 列） ================== */
.collection-row { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.collection-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.collection-card { background: #fff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: all .2s; cursor: pointer; display: flex; flex-direction: column; }
.collection-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.collection-card .cover { position: relative; aspect-ratio: 16/9; }
.collection-card .count-badge { position: absolute; right: 10px; top: 10px; background: rgba(0,0,0,.7); color: #fff; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.collection-card .body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.collection-card .body .title { font-size: 16px; font-weight: 800; color: var(--gray-800); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.collection-card .body .intro { font-size: 13px; color: var(--gray-700); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 60px; }
.collection-card .body .coll-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.collection-card .body .coll-tag { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 6px; background: var(--pink-50); color: var(--pink-600); font-size: 13px; font-weight: 700; border: 1px solid var(--pink-100); }
.collection-card .body .cmt-hint { font-size: 12px; color: var(--pink-500); font-weight: 600; line-height: 1.4; }
.collection-card .body .stats { display: flex; align-items: center; gap: 14px; padding: 8px 0; font-size: 12px; color: var(--gray-500); border-top: 1px dashed var(--gray-100); border-bottom: 1px dashed var(--gray-100); }
.collection-card .body .stats .stat-item { white-space: nowrap; }
.collection-card .body .stats .stat-right { margin-left: auto; display: flex; gap: 14px; }
.collection-card .body .cmt-bar { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.collection-card .body .cmt-avs { display: flex; align-items: center; }
.collection-card .body .cmt-av { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--pink-100); color: var(--pink-600); font-size: 11px; font-weight: 700; border: 2px solid #fff; }
.collection-card .body .cmt-count { font-size: 12px; color: var(--gray-600); font-weight: 600; }
.collection-card .body .cmt-arrow { margin-left: auto; font-size: 18px; color: var(--gray-400); font-weight: 700; line-height: 1; }

/* ================== 合集详情页 ================== */
.coll-topbar { display: flex; align-items: center; gap: 12px; padding: 10px 0 16px; position: sticky; top: 0; background: var(--gray-50); z-index: 50; }
.coll-back { width: 36px; height: 36px; }
.coll-author-center { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; overflow: hidden; min-width: 0; }
.coll-author-center-av { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg,#fda4af,#e82769); color: #fff; font-size: 13px; font-weight: 800; flex-shrink: 0; }
.coll-author-center-name { font-size: 14px; font-weight: 700; color: var(--gray-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.coll-tag-sm { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: var(--pink-50); color: var(--pink-600); font-size: 12px; font-weight: 700; white-space: nowrap; }
.coll-create-btn { display: inline-flex; align-items: center; gap: 4px; padding: 8px 14px; border-radius: 999px; background: var(--pink-500); color: #fff; font-size: 13px; font-weight: 700; border: none; cursor: pointer; flex-shrink: 0; box-shadow: 0 2px 8px rgba(232,39,105,.3); }

.coll-detail { background: #fff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); margin-bottom: 16px; }
.coll-media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; }
.coll-media-item { aspect-ratio: 1; border-radius: 10px; overflow: hidden; cursor: pointer; }
.coll-media-cover { width: 100%; height: 100%; position: relative; }
.coll-media-dur { position: absolute; right: 6px; bottom: 6px; background: rgba(0,0,0,.65); color: #fff; padding: 2px 6px; border-radius: 4px; font-size: 11px; font-weight: 700; }

.coll-info-card { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.coll-info-card .coll-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.coll-info-card .coll-tag { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 6px; background: var(--pink-50); color: var(--pink-600); font-size: 13px; font-weight: 700; border: 1px solid var(--pink-100); }
.coll-info-card .coll-intro { font-size: 13px; color: var(--gray-700); line-height: 1.6; }
.coll-info-card .coll-cmt-hint { font-size: 12px; color: var(--pink-500); font-weight: 600; }
.coll-info-card .coll-stats { display: flex; align-items: center; gap: 14px; padding: 8px 0; font-size: 12px; color: var(--gray-500); border-top: 1px dashed var(--gray-100); border-bottom: 1px dashed var(--gray-100); }
.coll-info-card .coll-stats .stat-right { margin-left: auto; display: flex; gap: 14px; }
.coll-info-card .coll-stats b { color: var(--gray-700); font-weight: 700; }
.coll-info-card .coll-cmt-bar { display: flex; align-items: center; gap: 8px; }
.coll-info-card .coll-cmt-avs { display: flex; align-items: center; }
.coll-info-card .cmt-av { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--pink-100); color: var(--pink-600); font-size: 11px; font-weight: 700; border: 2px solid #fff; }
.coll-info-card .coll-cmt-count { font-size: 12px; color: var(--gray-600); font-weight: 600; }
.coll-info-card .coll-cmt-arrow { margin-left: auto; font-size: 18px; color: var(--gray-400); font-weight: 700; line-height: 1; }

.coll-author { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: var(--radius-md); padding: 12px 14px; box-shadow: var(--shadow-sm); margin-bottom: 12px; }
.coll-author-av { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg,#fda4af,#e82769); color: #fff; font-size: 14px; font-weight: 800; }
.coll-author-name { font-size: 14px; font-weight: 700; color: var(--gray-800); }

.coll-author-row { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.coll-author-row .coll-author { flex: 1; margin-bottom: 0; padding: 10px 14px; }
.coll-author-row .coll-fav-btn { width: auto; margin-bottom: 0; padding: 10px 18px; flex-shrink: 0; }

.coll-fav-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px; border-radius: var(--radius-md); background: #fff; color: var(--pink-500); font-size: 15px; font-weight: 800; border: 2px solid var(--pink-200); cursor: pointer; margin-bottom: 10px; transition: all .2s; }
.coll-fav-btn .fav-ic { font-size: 18px; }
.coll-fav-btn:hover { background: var(--pink-50); }
.coll-fav-btn.faved { background: var(--pink-500); color: #fff; border-color: var(--pink-500); }

.coll-fav-inline { width: auto; padding: 4px 12px; font-size: 12px; margin: 0 0 0 8px; border-width: 1px; gap: 4px; line-height: 1.4; }
.coll-fav-inline .fav-ic { font-size: 13px; }

.coll-publish-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px; border-radius: var(--radius-md); background: var(--pink-500); color: #fff; font-size: 15px; font-weight: 800; border: none; cursor: pointer; margin-bottom: 20px; box-shadow: 0 4px 12px rgba(232,39,105,.3); }
.coll-publish-btn:hover { background: var(--pink-600); }

.coll-video-section { margin-top: 4px; }
.coll-section-title { font-size: 16px; font-weight: 800; color: var(--gray-800); margin: 0 0 12px; }
.coll-video-list { display: flex; flex-direction: column; gap: 12px; }
.coll-video-card { display: flex; gap: 12px; background: #fff; border-radius: var(--radius-md); padding: 10px; box-shadow: var(--shadow-sm); cursor: pointer; transition: all .2s; }
.coll-video-card:hover { box-shadow: var(--shadow-md); }
.coll-vc-cover { width: 120px; height: 80px; border-radius: 10px; flex-shrink: 0; position: relative; overflow: hidden; }
.coll-vc-dur { position: absolute; right: 6px; bottom: 6px; background: rgba(0,0,0,.65); color: #fff; padding: 2px 6px; border-radius: 4px; font-size: 11px; font-weight: 700; }
.coll-vc-body { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.coll-vc-author { display: flex; align-items: center; gap: 6px; }
.coll-vc-av { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--pink-100); color: var(--pink-600); font-size: 11px; font-weight: 700; }
.coll-vc-name { font-size: 12px; font-weight: 700; color: var(--gray-700); }
.coll-vc-desc { font-size: 12px; color: var(--gray-500); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.coll-vc-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.coll-vc-fav { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: var(--pink-50); color: var(--pink-500); font-size: 12px; font-weight: 700; border: 1px solid var(--pink-200); cursor: pointer; }
.coll-vc-fav.faved { background: var(--pink-500); color: #fff; border-color: var(--pink-500); }
.coll-vc-fav .vc-fav-ic { font-size: 14px; }
.coll-vc-time { font-size: 11px; color: var(--gray-400); }

/* ================== 合集详情页 - 评论区 ================== */
.coll-cmt-section { margin-top: 8px; padding-bottom: 140px; }

/* 评论筛选栏 */
.cmt-filter-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; padding: 0 2px; flex-wrap: wrap; }
.cmt-filter-group, .cmt-sort-group { display: flex; gap: 8px; }
.cmt-sort-group { margin-left: auto; }
.cmt-filter-btn, .cmt-sort-btn {
  padding: 7px 14px; border-radius: 20px; border: 1px solid var(--gray-200);
  background: #fff; color: var(--gray-600); font-size: 13px; font-weight: 500;
  cursor: pointer; white-space: nowrap; transition: all .2s;
}
.cmt-sort-btn { display: inline-flex; align-items: center; gap: 4px; padding: 7px 12px; }
.cmt-sort-arrow { font-size: 12px; opacity: .5; transition: all .2s; }
.cmt-sort-btn.active .cmt-sort-arrow { opacity: 1; color: #fff; }
.cmt-filter-btn:hover, .cmt-sort-btn:hover { border-color: var(--pink-300); color: var(--pink-500); }
.cmt-sort-btn:hover .cmt-sort-arrow { opacity: 1; color: var(--pink-500); }
.cmt-filter-btn.active, .cmt-sort-btn.active {
  background: linear-gradient(135deg, var(--pink-500), var(--pink-400));
  border-color: transparent; color: #fff;
  box-shadow: 0 2px 8px rgba(232,39,105,.25);
}
.coll-cmt-input-fixed { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0)); background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-top: 1px solid var(--gray-100); box-shadow: 0 -4px 16px rgba(0,0,0,.06); }
.coll-cmt-input-fixed .coll-cmt-input { background: var(--gray-50); border-radius: 12px; padding: 8px; box-shadow: none; margin: 0; max-width: 720px; margin-left: auto; margin-right: auto; }
.coll-cmt-input { background: #fff; border-radius: var(--radius-md); padding: 12px; box-shadow: var(--shadow-sm); margin-bottom: 16px; }
.cmt-textarea { width: 100%; border: 1px solid var(--gray-200); border-radius: 10px; padding: 10px 12px; font-size: 14px; line-height: 1.5; resize: none; outline: none; background: var(--gray-50); box-sizing: border-box; font-family: inherit; min-height: 40px; max-height: 100px; overflow-y: auto; }
.cmt-textarea:focus { border-color: var(--pink-300); background: #fff; }
.coll-cmt-input-fixed .cmt-textarea { min-height: 38px; }
.cmt-upload-row { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 10px; gap: 10px; }
.cmt-preview-grid { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }
.cmt-preview-item { position: relative; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; }
.cmt-preview-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmt-preview-del { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; border: none; font-size: 14px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cmt-preview-badge { position: absolute; left: 4px; bottom: 4px; color: #fff; font-size: 10px; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.cmt-upload-actions { display: flex; align-items: center; gap: 10px; }
.cmt-upload-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--gray-50); border: 1px solid var(--gray-200); cursor: pointer; font-size: 18px; }
.cmt-upload-btn:hover { background: var(--pink-50); border-color: var(--pink-200); }
.cmt-count-hint { font-size: 12px; color: var(--gray-400); font-weight: 600; }
.cmt-submit-btn { padding: 8px 20px; border-radius: 999px; background: var(--pink-500); color: #fff; font-size: 13px; font-weight: 700; border: none; cursor: pointer; }
.cmt-submit-btn:hover { background: var(--pink-600); }

.coll-cmt-list { display: flex; flex-direction: column; gap: 14px; }
.cmt-empty { text-align: center; color: var(--gray-400); font-size: 13px; padding: 30px 0; }
.cmt-item { display: flex; gap: 10px; }
.cmt-avatar { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--pink-50); flex-shrink: 0; font-size: 18px; }
.cmt-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.cmt-meta { display: flex; align-items: center; gap: 8px; }
.cmt-name { font-size: 13px; font-weight: 700; color: var(--gray-700); }
.cmt-time { font-size: 11px; color: var(--gray-400); }
.cmt-text { font-size: 13px; color: var(--gray-700); line-height: 1.5; word-break: break-word; }
.cmt-media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; max-width: 240px; }
.cmt-media { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; display: block; background: var(--gray-100); pointer-events: none; }
.cmt-like-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: var(--gray-50); border: 1px solid var(--gray-200); color: var(--gray-500); font-size: 12px; font-weight: 600; cursor: pointer; margin-top: 2px; }
.cmt-like-btn.liked { background: var(--pink-50); border-color: var(--pink-200); color: var(--pink-500); }
.cmt-like-btn .cmt-like-ic { font-size: 14px; }

/* ================== 合集媒体预览 Lightbox（纯播放器/图片 + 左右滑动） ================== */
.media-lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.95); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; padding: 0; }
.media-lightbox.show { opacity: 1; visibility: visible; }
.media-lightbox-content { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.media-lightbox-real { max-width: 100%; max-height: 100vh; object-fit: contain; display: block; }
.media-lightbox-img { width: 100%; height: 100vh; background-size: cover; background-position: center; }

/* 返回按钮（左上角，透明圆形背景） */
.media-lightbox-back {
  position: absolute; top: calc(16px + env(safe-area-inset-top, 0)); left: 16px; z-index: 10;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .18s cubic-bezier(.4,0,.2,1);
}
.media-lightbox-back svg { display: block; }
.media-lightbox-back:hover {
  background: rgba(0,0,0,.55);
  border-color: rgba(255,255,255,.3);
  transform: scale(1.06);
}
.media-lightbox-back:active { transform: scale(.92); }

/* 左右导航箭头 */
.media-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 44px; height: 44px; border-radius: 50%; background: rgba(0,0,0,.4); border: none; color: #fff; font-size: 32px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s; user-select: none; }
.media-lightbox-nav:hover { background: rgba(232,39,105,.7); }
.media-lightbox-prev { left: 16px; }
.media-lightbox-next { right: 16px; }
@media (max-width: 768px) {
  .media-lightbox-nav { width: 38px; height: 38px; font-size: 26px; }
  .media-lightbox-prev { left: 8px; }
  .media-lightbox-next { right: 8px; }
}

/* 位置指示器 */
.media-lightbox-indicator { position: absolute; bottom: calc(24px + env(safe-area-inset-bottom, 0)); left: 50%; transform: translateX(-50%); z-index: 10; color: rgba(255,255,255,.85); font-size: 13px; font-weight: 600; background: rgba(0,0,0,.4); padding: 4px 14px; border-radius: 999px; letter-spacing: 1px; }

/* 评论区媒体可点击 */
.cmt-media-wrap { position: relative; cursor: pointer; border-radius: 8px; overflow: hidden; }
.cmt-media-wrap:active { opacity: .8; }
.cmt-media-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 32px; height: 32px; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; pointer-events: none; }

/* 合集媒体网格中的图文标识 */
.coll-media-type-badge { position: absolute; right: 6px; top: 6px; background: rgba(0,0,0,.6); color: #fff; padding: 2px 6px; border-radius: 6px; font-size: 11px; }

/* ================== 标签 Chip ================== */
.chips { display: flex; flex-wrap: wrap; gap: 8px; max-height: calc(2 * (13px * 1.4 + 14px) + 8px); overflow: hidden; }
.chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--gray-200); color: var(--gray-700); font-size: 13px; font-weight: 600; white-space: nowrap; }
.chip .chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip .chip-count { flex-shrink: 0; }
.chip.hot { color: var(--pink-500); background: var(--pink-50); border-color: var(--pink-200); }
.chip:hover { border-color: var(--pink-400); color: var(--pink-500); }

/* ================== 过滤器 Tab ================== */
.filter-tabs { display: flex; gap: 6px; padding: 8px 0 16px; flex-wrap: wrap; }
.filter-tabs .tab { padding: 7px 16px; border-radius: 999px; background: #fff; color: var(--gray-700); font-size: 13px; font-weight: 700; border: 1px solid var(--gray-100); }
.filter-tabs .tab.active { background: var(--pink-500); color: #fff; border-color: var(--pink-500); box-shadow: 0 4px 10px rgba(232,39,105,.25); }

/* 过滤器卡片：排序 Tab 在上，时间筛选在下，整体浅色背景 */
.filter-row { display: flex; flex-direction: column; gap: 10px; background: var(--gray-50); border-radius: 14px; padding: 12px 14px; }
.filter-row #filter-tabs { width: 100%; }
.filter-row #filter-tabs .filter-tabs { padding: 0; }
.filter-row #time-filter { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.time-label { font-size: 12px; color: var(--gray-500); font-weight: 600; }
.time-select {
  appearance: none; -webkit-appearance: none;
  padding: 6px 30px 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--gray-200);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;
  background-size: 12px;
  color: var(--gray-700);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  outline: none;
}
.time-select:focus { border-color: var(--pink-400); }

/* ================== 详情页 Banner / Hero ================== */
.hero { position: relative; border-radius: var(--radius-xl); overflow: hidden; margin-bottom: 20px; aspect-ratio: 21 / 8; display: flex; align-items: flex-end; color: #fff; }
.hero .bg { position: absolute; inset: 0; }
.hero .overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.78) 100%); }
.hero .info { position: relative; padding: 30px 36px; z-index: 1; width: 100%; }
.hero .info h1 { margin: 0 0 8px; font-size: 28px; font-weight: 900; }
.hero .stats { display: flex; gap: 20px; color: #fff; font-size: 14px; opacity: .92; }

/* ================== 单列表（合集详情视频列表 / 搜索结果） ================== */
.video-list { display: flex; flex-direction: column; gap: 16px; }
.video-list .item { display: grid; grid-template-columns: 320px 1fr; gap: 18px; background: #fff; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); cursor: pointer; transition: all .2s; }
.video-list .item:hover { transform: translateX(4px); box-shadow: var(--shadow-lg); }
.video-list .item .cover { position: relative; aspect-ratio: 16/9; }
.video-list .item .cover .episode { position: absolute; left: 10px; top: 10px; background: rgba(0,0,0,.75); color: #fff; padding: 3px 9px; border-radius: 6px; font-size: 12px; font-weight: 800; letter-spacing: .5px; }
.video-list .item .cover .duration { position: absolute; right: 10px; bottom: 10px; background: rgba(0,0,0,.7); color: #fff; padding: 3px 7px; border-radius: 6px; font-size: 11px; }
.video-list .item .body { padding: 16px 20px 16px 4px; display: flex; flex-direction: column; }
.video-list .item .body h3 { margin: 0 0 8px; font-size: 17px; line-height: 1.5; font-weight: 700; }
.video-list .item .body p { color: var(--gray-500); font-size: 13px; line-height: 1.7; margin: 0 0 12px; flex: 1; }
.video-list .item .body .foot { display: flex; align-items: center; gap: 14px; font-size: 12px; color: var(--gray-500); }
.video-list .item .body .foot .author { display: flex; align-items: center; gap: 6px; }
.video-list .item .body .foot .av { width: 24px; height: 24px; border-radius: 50%; background: var(--pink-300); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; }

/* ================== 登录/表单页（两栏） ================== */
.auth-wrap { min-height: calc(100vh - 68px); display: grid; grid-template-columns: 1.15fr 1fr; background: linear-gradient(135deg, #fff 0%, var(--pink-50) 100%); }
.auth-wrap .brand-side { padding: 60px 80px; display: flex; flex-direction: column; justify-content: center; }
.auth-wrap .brand-side h1 { font-size: 42px; color: var(--pink-500); margin: 18px 0 12px; }
.auth-wrap .brand-side p { font-size: 16px; line-height: 1.9; color: var(--gray-600); }
.auth-wrap .brand-side .slogan-img { margin-top: 30px; border-radius: var(--radius-xl); aspect-ratio: 16/9; background: linear-gradient(135deg,var(--pink-300),var(--pink-600)); box-shadow: var(--shadow-lg); }
.auth-wrap .form-side { background: #fff; padding: 60px 60px; display: flex; flex-direction: column; justify-content: center; border-left: 1px solid var(--gray-100); }
.auth-wrap .form-side h2 { margin: 0 0 6px; font-size: 26px; }
.auth-wrap .form-side .sub { color: var(--gray-500); font-size: 13px; margin-bottom: 22px; }
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 13px; color: var(--gray-700); font-weight: 700; margin-bottom: 6px; }
.form-control { width: 100%; padding: 12px 14px; border: 1.5px solid var(--gray-200); border-radius: 12px; font-size: 14px; outline: none; transition: all .15s; }
.form-control:focus { border-color: var(--pink-400); box-shadow: 0 0 0 3px rgba(232,39,105,.08); }
.row-inline { display: flex; gap: 10px; align-items: center; }
.row-inline .grow { flex: 1; }
.link-pink { color: var(--pink-500); font-weight: 700; }
.test-card { margin: 14px 0 20px; padding: 14px 16px; background: linear-gradient(135deg, #fff0f3, #ffe4ec); border: 1px dashed var(--pink-400); border-radius: var(--radius-lg); cursor: pointer; transition: all .15s; }
.test-card:hover { transform: scale(.99); box-shadow: var(--shadow-sm); }
.test-card .row { display: flex; gap: 14px; font-size: 13px; margin-top: 6px; color: var(--gray-700); }
.test-card .val { color: var(--pink-600); font-weight: 800; }
.test-card .title { color: var(--pink-500); font-weight: 800; font-size: 13px; }

/* ================== 个人中心 两栏 ================== */
.profile-wrap { display: grid; grid-template-columns: 240px 1fr; gap: 24px; }
.side-nav { background: #fff; border-radius: var(--radius-lg); padding: 20px 12px; box-shadow: var(--shadow-sm); height: fit-content; }
.side-nav .menu-head { display: flex; flex-direction: column; align-items: center; padding: 14px 0 22px; border-bottom: 1px dashed var(--gray-100); }
.side-nav .menu-head .avatar { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg,var(--pink-300),var(--pink-600)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 900; }
.side-nav .menu-head .name { font-size: 16px; font-weight: 800; margin-top: 10px; }
.side-nav .menu-head .id { color: var(--gray-500); font-size: 12px; margin-top: 2px; }
.side-nav ul { list-style: none; padding: 8px 4px; margin: 0; }
.side-nav ul li { margin: 2px 0; }
.side-nav ul li a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--gray-700); font-size: 14px; font-weight: 600; }
.side-nav ul li a:hover { background: var(--pink-50); color: var(--pink-500); }
.side-nav ul li a.active { background: var(--pink-500); color: #fff; box-shadow: 0 4px 12px rgba(232,39,105,.25); }
.profile-main .card { background: #fff; border-radius: var(--radius-lg); padding: 24px 26px; box-shadow: var(--shadow-sm); }
.stat-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 20px; }
.stat-row .stat { background: linear-gradient(135deg,#fff,var(--pink-50)); padding: 18px 20px; border-radius: var(--radius-md); }
.stat-row .stat .num { font-size: 26px; font-weight: 900; color: var(--pink-500); }
.stat-row .stat .label { font-size: 12px; color: var(--gray-500); margin-top: 4px; }

/* ================== 上传步骤条 ================== */
.steps { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px 0 30px; }
.steps .s { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--gray-100); color: var(--gray-500); }
.steps .s.done, .steps .s.active { background: var(--pink-500); color: #fff; box-shadow: 0 4px 12px rgba(232,39,105,.25); }
.steps .arrow { color: var(--gray-300); font-weight: 900; }

/* ================== Toast / 对话框 ================== */
.toast { position: fixed; left: 50%; top: 80px; transform: translateX(-50%); padding: 10px 18px; border-radius: 999px; background: rgba(31,35,40,.92); color: #fff; font-size: 14px; font-weight: 600; z-index: 9999; animation: toastIn .25s ease; box-shadow: var(--shadow-lg); }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, -10px);} to { opacity: 1; transform: translate(-50%, 0);} }

/* ================== 悬浮按钮（发布） ================== */
.fabs { position: fixed; right: 28px; bottom: 40px; display: flex; flex-direction: column; gap: 14px; z-index: 90; }
.fab-publish { display: inline-flex; align-items: center; gap: 5px; padding: 0 15px; height: 42px; border-radius: 999px; background: linear-gradient(135deg, #ff4d8d, #e82769); color: #fff; font-weight: 800; font-size: 12px; box-shadow: 0 4px 14px rgba(232,39,105,.35); border: 1.5px solid #fff; }

/* ================== 页脚 ================== */
.site-footer { background: #fff; border-top: 1px solid var(--gray-100); padding: 30px 0 22px; color: var(--gray-500); font-size: 13px; }
.site-footer .grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 30px; }
.site-footer .grid h4 { color: var(--gray-800); font-size: 14px; margin: 0 0 14px; }
.site-footer .grid a { display: block; color: var(--gray-500); margin: 6px 0; }
.site-footer .copy { text-align: center; margin-top: 30px; padding-top: 18px; border-top: 1px dashed var(--gray-100); }

/* ================== 空状态 ================== */
.empty { text-align: center; padding: 80px 0; color: var(--gray-500); }
.empty .icon { font-size: 56px; opacity: .5; }
.empty .txt { margin-top: 14px; font-size: 14px; }

/* ================== @media 响应式（平板 / iPad） ================== */
@media (max-width: 1100px) {
  .auth-wrap .brand-side { padding: 40px; }
  .auth-wrap .form-side { padding: 40px; }

  .nav-links { gap: 2px; margin-left: 8px; }
  .nav-links a { padding: 7px 10px; font-size: 13px; }
  .top-search { max-width: 320px; }
  .top-actions { gap: 6px; }
  .top-actions .btn { padding: 8px 12px; font-size: 13px; }
  .top-actions .lang-switch { padding: 6px 8px; font-size: 11px; }
  .top-actions .lang-switch .btn-text { display: none; }
  .top-actions .admin-entry .btn-text { display: none; }
  .avatar-btn { width: 36px; height: 36px; font-size: 14px; }
  .site-header .top-bar { gap: 14px; }

  .profile-wrap { grid-template-columns: 220px 1fr; gap: 18px; }
  .side-nav { padding: 16px 10px; }
  .side-nav .menu-head { padding: 10px 0 18px; }
  .side-nav .menu-head .avatar { width: 64px; height: 64px; font-size: 22px; }
  .stat-row { grid-template-columns: repeat(2,1fr); }

  .msg-nav .n { padding: 12px 6px; font-size: 13px; }
  .msg-item { grid-template-columns: 46px 1fr auto; padding: 12px 14px; gap: 12px; }
  .msg-item .av { width: 46px; height: 46px; font-size: 15px; }
}

/* ================== @media 响应式（H5 移动） ================== */
@media (max-width: 768px) {
  .hide-pc { display: block !important; }
  .hide-mb { display: none !important; }
  .container { width: 100%; max-width: 100%; padding: 0 14px; }
  main.page-wrap { padding: 14px 0 96px; }
  main.page-wrap.page-primary { padding-top: 2px; }

  /* 顶部导航（原型规格两行布局）
   * 第一行：Logo（左） + 🌐语言/💬消息/👤头像或登录按钮（右，margin-left:auto 推到右端，4元素）
   * 第二行：top-search 独占 100% 宽度
   * 顶栏发布按钮隐藏，由右下角 FAB（带扫光动画）独立承担（符合"除发布外全图标"的原型规则）*/
  .site-header .top-bar { height: auto; min-height: 58px; gap: 8px 10px; flex-wrap: wrap; padding: 10px 12px 8px; }
  .logo { font-size: 18px; flex: 0 0 auto; }
  .logo-icon { width: 30px; height: 30px; font-size: 15px; }
  .nav-links { display: none; }
  .lang-switch { padding: 6px 9px; font-size: 11px; }
  .lang-switch .btn-text { display: none; }
  .top-actions { margin-left: auto; gap: 6px; flex: 0 0 auto; }
  .top-actions .btn { padding: 7px 11px; font-size: 12px; }
  .top-actions .btn:not(.btn-pink) .btn-text { display: none; }
  .top-actions .admin-entry { display: none; }
  .top-actions .publish-btn { display: none; }
  .top-search { order: 10; flex: 0 0 100%; width: 100%; max-width: 100%; margin: 2px 0 4px; }
  .search-bar { padding: 7px 10px 7px 12px; }
  .search-bar input { font-size: 13px; }
  .search-bar button { padding: 6px 12px; font-size: 12px; }
  .avatar-btn { width: 34px; height: 34px; font-size: 13px; }
  .badge { min-width: 16px; height: 16px; padding: 0 4px; line-height: 16px; font-size: 9px; border-width: 2px; top: -2px; right: -1px; }

  .section-title { margin: 14px 0 10px; gap: 10px; }
  .section-title h2 { font-size: 16px; }
  .section-title .more-link { font-size: 12px; white-space: nowrap; }

  .back-header { padding: 10px 0 12px; gap: 10px; }
  .back-btn { width: 36px; height: 36px; }
  .back-btn svg { width: 16px; height: 16px; }
  .back-title { font-size: 18px; }

  .video-grid { gap: 12px; }
  .video-card { border-radius: 12px; }
  .video-card .meta { padding: 10px 12px 12px; gap: 5px; }
  .video-card .meta .title { font-size: 14px; }
  .video-card .meta .desc { font-size: 11px; }
  .video-card .meta .row { gap: 6px; font-size: 11px; }
  .video-card .meta .stats { gap: 8px; }
  .video-card .cover .view-count, .video-card .cover .duration { font-size: 10px; padding: 2px 6px; bottom: 6px; }
  .video-card .cover .view-count { right: 6px; }
  .video-card .cover .duration { left: 6px; }

  .chips { gap: 6px; max-height: calc(2 * (12px * 1.4 + 12px) + 6px); }
  .chip { padding: 5px 10px; font-size: 12px; }

  /* 排序 Tab：移动端横向滚动不换行 */
  .filter-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
  .filter-tabs::-webkit-scrollbar { display: none; }
  .filter-tabs .tab { flex: 0 0 auto; padding: 7px 14px; font-size: 12px; }
  /* 时间筛选：移动端更紧凑 */
  .filter-row { gap: 8px; padding: 10px 12px; }
  .time-select { padding: 6px 26px 6px 12px; font-size: 11px; background-size: 10px; }
  .time-label { font-size: 11px; }

  .collection-row { grid-template-columns: repeat(2,1fr); gap: 12px; }
  .collection-grid { grid-template-columns: 1fr; gap: 12px; }
  .collection-card { border-radius: 14px; }
  .collection-card .count-badge { font-size: 11px; padding: 3px 8px; right: 8px; top: 8px; }
  .collection-card .body { padding: 10px 12px 12px; gap: 6px; }
  .collection-card .body .title { font-size: 14px; }
  .collection-card .body .intro { font-size: 12px; min-height: 44px; -webkit-line-clamp: 2; line-height: 1.6; }
  .collection-card .body .coll-tag { padding: 3px 8px; font-size: 12px; }
  .collection-card .body .cmt-hint { font-size: 11px; }
  .collection-card .body .stats { gap: 10px; padding: 6px 0; font-size: 11px; }
  .collection-card .body .stats .stat-right { gap: 10px; }
  .collection-card .body .cmt-av { width: 18px; height: 18px; font-size: 10px; }
  .collection-card .body .cmt-count { font-size: 11px; }
  .collection-card .body .cmt-arrow { font-size: 16px; }

  .coll-topbar { padding: 8px 0 12px; gap: 8px; }
  .coll-back { width: 34px; height: 34px; }
  .coll-back svg { width: 16px; height: 16px; }
  .coll-author-center-av { width: 24px; height: 24px; font-size: 11px; }
  .coll-author-center-name { font-size: 13px; }
  .coll-tag-sm { padding: 2px 8px; font-size: 11px; }
  .coll-create-btn { padding: 6px 10px; font-size: 12px; }
  .coll-create-btn span:last-child { display: none; }
  .coll-media-grid { grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px; }
  .coll-info-card { padding: 10px 12px 12px; gap: 6px; }
  .coll-info-card .coll-tag { padding: 3px 8px; font-size: 12px; }
  .coll-info-card .coll-intro { font-size: 12px; }
  .coll-info-card .coll-cmt-hint { font-size: 11px; }
  .coll-info-card .coll-stats { gap: 10px; padding: 6px 0; font-size: 11px; }
  .coll-info-card .coll-stats .stat-right { gap: 10px; }
  .coll-info-card .cmt-av { width: 18px; height: 18px; font-size: 10px; }
  .coll-info-card .coll-cmt-count { font-size: 11px; }
  .coll-author-row { gap: 8px; }
  .coll-author { padding: 10px 12px; }
  .coll-author-av { width: 32px; height: 32px; font-size: 13px; }
  .coll-author-row .coll-fav-btn { padding: 9px 14px; font-size: 13px; }
  .coll-vc-cover { width: 100px; height: 70px; }
  .coll-vc-desc { font-size: 11px; }
  .coll-vc-name { font-size: 11px; }
  .coll-cmt-input { padding: 10px; }
  .cmt-textarea { font-size: 13px; padding: 8px 10px; }
  .cmt-preview-item { width: 50px; height: 50px; }
  .cmt-upload-btn { width: 32px; height: 32px; font-size: 16px; }
  .cmt-submit-btn { padding: 7px 16px; font-size: 12px; }
  .cmt-avatar { width: 32px; height: 32px; font-size: 16px; }
  .cmt-name { font-size: 12px; }
  .cmt-text { font-size: 12px; }
  .cmt-media-grid { max-width: 200px; }
  .cmt-like-btn { padding: 3px 8px; font-size: 11px; }

  .hero { aspect-ratio: auto; min-height: 200px; border-radius: var(--radius-lg); }
  .hero .info { padding: 18px 18px 22px; }
  .hero .info h1 { font-size: 19px; line-height: 1.4; }
  .hero .stats { flex-wrap: wrap; gap: 10px; font-size: 12px; }
  .hero .stats .btn { margin-left: 0 !important; }

  .video-list { gap: 12px; }
  .video-list .item { grid-template-columns: 120px 1fr; gap: 10px; border-radius: var(--radius-md); }
  .video-list .item .body { padding: 10px 10px 10px 0; }
  .video-list .item .body h3 { font-size: 14px; margin: 0 0 6px; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
  .video-list .item .body p { font-size: 12px; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; margin: 0 0 8px; }
  .video-list .item .body .foot { flex-wrap: wrap; gap: 8px; font-size: 11px; }
  .video-list .item .cover .episode { left: 8px; top: 8px; padding: 2px 7px; font-size: 11px; }
  .video-list .item .cover .duration { right: 8px; bottom: 8px; padding: 2px 6px; font-size: 10px; }

  .auth-wrap { grid-template-columns: 1fr; min-height: auto; }
  .auth-wrap .brand-side { padding: 28px 20px 18px; }
  .auth-wrap .brand-side h1 { font-size: 26px; line-height: 1.3; margin: 14px 0 10px; }
  .auth-wrap .brand-side p { font-size: 14px; }
  .auth-wrap .form-side { padding: 22px 18px 36px; border-left: none; border-top: 1px solid var(--gray-100); }
  .auth-wrap .form-side h2 { font-size: 22px; }
  .form-control { padding: 11px 12px; font-size: 15px; }

  .profile-wrap { grid-template-columns: 1fr; gap: 12px; }
  .side-nav { padding: 14px 10px; }
  .side-nav .menu-head { padding: 10px 0 16px; }
  .side-nav .menu-head .avatar { width: 60px; height: 60px; font-size: 22px; }
  .side-nav .menu-head .name { font-size: 15px; margin-top: 8px; }
  .side-nav ul { padding: 4px; }
  .side-nav ul li a { font-size: 13px; padding: 10px 8px; }
  .profile-main .card { padding: 16px 14px; border-radius: 14px; }
  .stat-row { grid-template-columns: repeat(2,1fr); gap: 10px; }
  .stat-row .stat { padding: 12px 14px; border-radius: 12px; }
  .stat-row .stat .num { font-size: 20px; }
  .stat-row .stat .label { font-size: 11px; margin-top: 2px; }

  /* 悬浮按钮在底部导航栏上方，留出间距 */
  .fabs { right: 12px; bottom: calc(88px + env(safe-area-inset-bottom, 0)); gap: 10px; }
  .fab-publish { height: 36px; padding: 0 12px; font-size: 11px; border-width: 1.5px; }

  /* 首页手机端：个人中心入口改由底部导航栏"我的"承担，故隐藏头像入口 */
  body.home-page .avatar-btn { display: none !important; }
  body.home-page .top-actions { gap: 6px; }

  .steps { flex-wrap: wrap; gap: 4px; }
  .steps .s { font-size: 12px; padding: 6px 10px; }

  .site-footer .grid { grid-template-columns: repeat(2,1fr); gap: 16px; }
  .site-footer { padding: 24px 0 18px; font-size: 12px; }
  .site-footer .grid h4 { font-size: 13px; margin: 0 0 10px; }
  .site-footer .grid a { margin: 4px 0; }
  .site-footer .copy { margin-top: 20px; padding-top: 14px; font-size: 11px; }

  .msg-nav { flex-wrap: wrap; margin-bottom: 14px; }
  .msg-nav .n { flex: 1 1 50%; padding: 12px 0; font-size: 13px; border-width: 2px; }
  .msg-item { grid-template-columns: 44px 1fr auto; padding: 12px 12px; gap: 10px; margin-bottom: 8px; }
  .msg-item .av { width: 44px; height: 44px; font-size: 15px; }
  .msg-item .name { font-size: 14px; }
  .msg-item .content { font-size: 12px; margin-top: 3px; }
  .msg-item .time { font-size: 10px; }
  .msg-item .badge { min-width: 18px; padding: 0 6px; height: 18px; line-height: 18px; font-size: 10px; }

  .empty { padding: 48px 0; }
  .empty .icon { font-size: 44px; }
  .toast { top: 66px; font-size: 13px; padding: 9px 14px; max-width: 90vw; }
}

/* ========= 针对 380px 以下（迷你屏如 iPhone SE 326） ========= */
@media (max-width: 380px) {
  .container { padding: 0 12px; }
  .hero .info { padding: 16px 14px 20px; }
  .hero .info h1 { font-size: 17px; }
  .video-card .meta .title { font-size: 13px; }
  .site-header .top-bar { padding: 10px 10px 8px; }
  .section-title h2 { font-size: 15px; }
  .top-actions { gap: 5px; }
  .top-actions .btn { padding: 6px 9px; font-size: 11px; }
  .top-actions .publish-btn { display: none; }
  .avatar-btn { width: 32px; height: 32px; font-size: 12px; }
  .logo { font-size: 16px; gap: 6px; }
  .logo-icon { width: 28px; height: 28px; font-size: 14px; }
  .msg-item { grid-template-columns: 42px 1fr auto; padding: 12px 12px; gap: 10px; }
  .msg-item .av { width: 42px; height: 42px; font-size: 14px; }
  .msg-nav { flex-wrap: wrap; }
  .msg-nav .n { flex: 1 1 50%; padding: 12px 0; font-size: 13px; }
}

/* ================== 手机端底部导航栏 ================== */
.bottom-tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;
  display: flex !important; align-items: center; justify-content: space-around;
  background: #fff;
  border-top: 1px solid var(--gray-100);
  box-shadow: 0 -2px 10px rgba(0,0,0,.05);
  padding: 4px 0 calc(4px + env(safe-area-inset-bottom, 0));
}
/* 普通 Tab：图标 + 文字 */
.bottom-tabbar .tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 2px 0; color: var(--gray-500); text-decoration: none;
  transition: color .15s, transform .15s;
}
.bottom-tabbar .tab .ic { font-size: 20px; line-height: 1; }
.bottom-tabbar .tab .lb { font-size: 10px; margin-top: 3px; font-weight: 600; }
.bottom-tabbar .tab.active { color: var(--pink-500); }
.bottom-tabbar .tab.active .ic { transform: scale(1.08); }
/* 发布按钮 - 突出圆形凸起 */
.bottom-tabbar .tab.tab-publish {
  flex: 1;
  position: relative;
  top: -12px;
}
.bottom-tabbar .tab.tab-publish .ic {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, #ff4d8d, #e82769);
  color: #fff; font-size: 24px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(232,39,105,.4);
  border: 2.5px solid #fff;
  transition: transform .15s;
}
.bottom-tabbar .tab.tab-publish:active .ic { transform: scale(.92); }
.bottom-tabbar .tab.tab-publish .lb {
  color: var(--gray-700); margin-top: 4px;
}
.bottom-tabbar .tab.tab-publish.active .lb { color: var(--pink-500); }
/* 有底部导航栏时，内容底部留白 */
body.has-tabbar main.page-wrap { padding-bottom: 70px !important; }

/* ====== 发布选择菜单 ====== */
#publish-menu {
  position: fixed; z-index: 9999;
  background: #fff; border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,.18);
  padding: 8px;
  animation: pmFadeIn .18s ease;
}
@keyframes pmFadeIn { from { opacity:0; transform: translateY(8px);} to { opacity:1; transform: translateY(0);} }
#publish-menu .pm-arrow {
  position: absolute; left: 50%; bottom: -7px;
  transform: translateX(-50%) rotate(45deg);
  width: 14px; height: 14px; background: #fff;
  border-right: 1px solid rgba(0,0,0,.04);
  border-bottom: 1px solid rgba(0,0,0,.04);
}
#publish-menu .pm-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 12px;
  cursor: pointer; transition: background .12s;
}
#publish-menu .pm-item:active { background: var(--pink-50); }
#publish-menu .pm-item + .pm-item { margin-top: 2px; }
#publish-menu .pm-ic {
  width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
}
#publish-menu .pm-text { flex: 1; min-width: 0; }
#publish-menu .pm-title { font-size: 15px; font-weight: 700; color: var(--gray-800); }
#publish-menu .pm-desc { font-size: 12px; color: var(--gray-500); margin-top: 2px; }
#publish-menu .pm-go { color: var(--gray-300); font-size: 20px; font-weight: 700; }