/* ============================================================
   乔网 样式 - 简洁现代（参考 sodig.com 风格）
   浅色/深色双主题 / 流星背景 / 圆角 12px / 系统无衬线字体
   ============================================================ */

/* ---------- 主题变量（浅色默认） ---------- */
:root {
  --bg: #f7f8fa;
  --card-bg: #ffffff;
  --text: #1f2329;
  --text-muted: #8a919f;
  --text-light: #b0b6c0;
  --border: #e2e6ec;
  --border-light: #f0f2f5;
  --navbar-bg: rgba(255, 255, 255, 0.85);
  --card-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  --card-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.1);
  --poster-bg: #e8ebf0;
  --poster-grad: linear-gradient(135deg, #eef1f5, #dde3ea);
  --poster-text: #b6bfcc;
  --star-empty: #d8dee6;
  --hero-sub: #6b7684;
  --btn-disabled: #c3cbd6;
  --btn-off: #6b7684;
  --input-bg: #ffffff;
  /* 流星 */
  --meteor-tail: rgba(43, 110, 242, 0.45);
  --meteor-head: #2b6ef2;
  --meteor-glow: rgba(43, 110, 242, 0.6);
}

/* ---------- 深色主题 ---------- */
[data-theme="dark"] {
  --bg: #0f1115;
  --card-bg: #1a1e26;
  --text: #e8eaee;
  --text-muted: #8f98a6;
  --text-light: #6b7482;
  --border: #2a303b;
  --border-light: #262c37;
  --navbar-bg: rgba(15, 17, 21, 0.8);
  --card-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  --card-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.55);
  --poster-bg: #232936;
  --poster-grad: linear-gradient(135deg, #232936, #1a1f2b);
  --poster-text: #5b6472;
  --star-empty: #3a4150;
  --hero-sub: #9aa4b2;
  --btn-disabled: #3a4150;
  --btn-off: #4a5260;
  --input-bg: #232936;
  /* 流星（深色下更亮） */
  --meteor-tail: rgba(170, 190, 255, 0.5);
  --meteor-head: #dbe4ff;
  --meteor-glow: rgba(150, 170, 255, 0.65);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ---------- 流星背景层（位于内容之下） ---------- */
.meteor-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.meteor {
  position: absolute;
  top: -8%;
  left: -5%;
  width: 180px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(to right, transparent 0%, var(--meteor-tail) 85%);
  transform: rotate(45deg);
  opacity: 0;
  animation: meteorFall linear infinite;
}

/* 流星头部亮点 */
.meteor::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--meteor-head);
  box-shadow: 0 0 8px 2px var(--meteor-glow);
}

/* 6 条流星：不同起点 / 周期 / 延迟，营造错落感 */
.meteor:nth-child(1) { left: 5%;  animation-duration: 8s;  animation-delay: 0s; }
.meteor:nth-child(2) { left: 15%; animation-duration: 11s; animation-delay: 2.5s; }
.meteor:nth-child(3) { left: 25%; animation-duration: 9s;  animation-delay: 5s; }
.meteor:nth-child(4) { left: 35%; animation-duration: 13s; animation-delay: 7.5s; }
.meteor:nth-child(5) { left: 45%; animation-duration: 10s; animation-delay: 10s; }
.meteor:nth-child(6) { left: 55%; animation-duration: 8.5s; animation-delay: 12.5s; }

@keyframes meteorFall {
  0% {
    opacity: 0;
    transform: rotate(45deg) translate(0, 0);
  }
  8% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(45deg) translate(78vw, 78vw);
  }
}

/* ---------- 顶部导航（毛玻璃） ---------- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: var(--navbar-bg);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  transition: background-color 0.3s ease;
}

.logo {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 1px;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 深浅色切换按钮（圆形） */
.btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--card-bg);
  color: var(--text);
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.btn-icon:hover {
  color: #2b6ef2;
  border-color: #2b6ef2;
}

.btn-icon svg {
  display: block;
}

/* 浅色模式显示月亮（点击切深色），深色模式显示太阳（点击切浅色） */
.btn-icon .icon-sun {
  display: none;
}

[data-theme="dark"] .btn-icon .icon-moon {
  display: none;
}

[data-theme="dark"] .btn-icon .icon-sun {
  display: block;
}

/* ---------- 品牌大标题（居中 + 粒子 Canvas） ---------- */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 72px 24px 40px;
  animation: heroFadeUp 0.9s ease both;
}

.hero-title {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  cursor: crosshair; /* 提示可交互 */
  filter: drop-shadow(0 6px 24px rgba(43, 110, 242, 0.25));
}

.hero-sub {
  margin-top: 16px;
  font-size: 16px;
  color: var(--hero-sub);
  letter-spacing: 2px;
}

.hero-line {
  width: 64px;
  height: 4px;
  margin: 24px auto 0;
  border-radius: 4px;
  background: linear-gradient(90deg, #2b6ef2, #ff6b6b, #ffb400);
  background-size: 200% auto;
  animation: gradientFlow 6s linear infinite;
}

@keyframes gradientFlow {
  to {
    background-position: 200% center;
  }
}

@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.btn-upload {
  padding: 8px 20px;
  font-size: 14px;
  color: #fff;
  background: #2b6ef2;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-upload:hover {
  background: #1f5bd6;
}

/* 导航栏次级按钮（聊天室 / 下载APP） */
.nav-btn {
  padding: 8px 16px;
  font-size: 14px;
  color: var(--text);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background-color 0.3s;
}

.nav-btn:hover {
  color: #2b6ef2;
  border-color: #2b6ef2;
}

.btn-small {
  padding: 6px 14px;
  font-size: 13px;
  color: #fff;
  background: #2b6ef2;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.btn-small:disabled {
  background: var(--btn-disabled);
  cursor: not-allowed;
}

/* ---------- 视频网格（桌面 4 列 / 平板 2 列 / 手机 1 列） ---------- */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width: 1024px) {
  .video-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .video-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- 视频卡片 ---------- */
.card {
  background: var(--card-bg);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, background-color 0.3s;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-shadow-hover);
}

.card-poster {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--poster-bg);
  overflow: hidden;
}

.card-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 封面缺失时的占位块 */
.card-poster .no-poster {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 40px;
  font-weight: 700;
  color: var(--poster-text);
  background: var(--poster-grad);
}

.rating-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 8px;
  font-size: 12px;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 6px;
}

.card-info {
  padding: 12px 14px 14px;
}

.card-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 作者栏 */
.card-author {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 赞踩（加减式：👍 +1 / 👎 -1） */
.vote-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.vote-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  font-size: 15px;
  line-height: 1;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.2s, background-color 0.3s;
}

.vote-btn:hover {
  transform: scale(1.15);
  border-color: #2b6ef2;
}

.vote-score {
  min-width: 32px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

/* ---------- 模态框 ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
}

.modal.hidden {
  display: none;
}

.modal-content {
  position: relative;
  width: min(1120px, 96vw);
  background: var(--card-bg);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  transition: background-color 0.3s;
}

/* 模态框左右布局：视频 + 评论区 */
.modal-body {
  display: flex;
  gap: 16px;
}

.video-area {
  flex: 1;
  min-width: 0;
}

.modal-close {
  position: absolute;
  top: 8px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
}

.modal-close:hover {
  background: rgba(0, 0, 0, 0.75);
}

.video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}

.video-wrap video {
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------- 弹幕层（覆盖在视频上方） ---------- */
.danmaku-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; /* 铺满视频区（弹幕输入栏已在视频下方，不遮挡播放器控制条） */
  overflow: hidden;
  pointer-events: none;
}

.danmaku-layer.hidden {
  display: none;
}

.danmaku-item {
  position: absolute;
  left: 100%; /* 从视频右侧外进入，向左移动 */
  white-space: nowrap;
  color: #fff;
  padding: 2px 10px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.5);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  will-change: transform;
  animation: danmakuMove linear;
}

@keyframes danmakuMove {
  from {
    transform: translateX(0);
  }
  to {
    /* 负值由 JS 按弹幕层宽度设置（避免 calc 乘法，兼容移动端浏览器） */
    transform: translateX(var(--danmaku-distance, -100vw));
  }
}

/* 弹幕输入栏（视频下方独立一行，不覆盖播放器控制条） */
.video-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px;
  margin-top: 10px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.video-toolbar input {
  flex: 1;
  padding: 6px 10px;
  font-size: 13px;
  color: var(--text);
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  outline: none;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.video-toolbar input::placeholder {
  color: var(--text-light);
}

.modal-title {
  margin-top: 12px;
  font-size: 16px;
  font-weight: 600;
}

/* ---------- 评论区 ---------- */
.comment-area {
  display: flex;
  flex-direction: column;
  width: 300px;
  min-height: 400px;
  padding-left: 16px;
  border-left: 1px solid var(--border-light);
}

.comment-header {
  font-size: 15px;
  font-weight: 600;
  padding-bottom: 10px;
}

/* 评论昵称输入行 */
.comment-nick-row {
  display: flex;
  gap: 8px;
  padding: 8px 0 10px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border-light);
}

.comment-nick-row.hidden {
  display: none;
}

.comment-nick-row input {
  flex: 1;
  padding: 7px 10px;
  font-size: 13px;
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  outline: none;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.comment-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
  max-height: 440px;
  font-size: 13px;
}

.comment-item {
  margin-bottom: 14px;
}

.comment-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.comment-nick {
  font-weight: 600;
  color: #2b6ef2;
  font-size: 13px;
}

.comment-time {
  font-size: 11px;
  color: var(--text-light);
}

.comment-text {
  margin-top: 4px;
  line-height: 1.5;
  word-break: break-word;
  color: var(--text);
}

.comment-input-row {
  display: flex;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border-light);
}

.comment-input-row input {
  flex: 1;
  padding: 7px 10px;
  font-size: 13px;
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  outline: none;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

/* 窄屏：模态框整体可滚动，评论移到视频下方（手机端可见） */
@media (max-width: 860px) {
  .modal {
    align-items: flex-start;
    overflow-y: auto;
    padding: 16px 0;
  }
  .modal-body {
    flex-direction: column;
  }
  .comment-area {
    width: 100%;
    min-height: 0;
    padding-left: 0;
    padding-top: 12px;
    border-left: none;
    border-top: 1px solid var(--border-light);
  }
  .comment-list {
    max-height: 240px;
  }
}

/* ---------- 聊天悬浮面板（右下角，可收起） ---------- */
.chat-panel {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 150;
  width: 300px;
  background: var(--card-bg);
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: background-color 0.3s;
}

/* 收起时整体隐藏（由顶部导航栏“聊天室”按钮控制开关） */
.chat-panel.collapsed {
  display: none;
}

.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: #2b6ef2;
  color: #fff;
  font-size: 13px;
}

.chat-panel.collapsed .chat-header {
  width: 100%;
  height: 100%;
  padding: 0;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
}

/* 收起按钮小圆钮上的“聊”字 */
.chat-header .fab-text {
  display: none;
}

.chat-panel.collapsed .chat-header .fab-text {
  display: block;
  font-size: 22px;
  font-weight: 700;
}

.chat-body {
  display: flex;
  flex-direction: column;
  height: 260px;
}

.nickname-box {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-light);
}

.nickname-box.hidden {
  display: none;
}

.nickname-box input,
.chat-input-row input {
  flex: 1;
  padding: 7px 10px;
  font-size: 13px;
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  outline: none;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.6;
}

.chat-msg {
  margin-bottom: 8px;
  word-break: break-word;
}

.chat-msg .nick {
  font-weight: 600;
  color: #2b6ef2;
  margin-right: 6px;
}

.chat-msg .time {
  font-size: 11px;
  color: var(--text-light);
  margin-left: 6px;
}

.chat-msg.system {
  color: var(--text-muted);
  text-align: center;
  font-size: 12px;
}

.chat-input-row {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--border-light);
}

/* ---------- 弹幕开关已关闭状态 ---------- */
.btn-small.off {
  background: var(--btn-off);
}