/* ========== 全局重置 ========== */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { width:100%; height:100%; overflow:hidden; background:#000; font-family:system-ui, -apple-system, sans-serif; }
.page { display:none; width:100%; height:100%; }
.page.active { display:block; }

/* ========== Toast 提示 ========== */
.error-toast {
  position: fixed; bottom: 80px; left: 20px; right: 20px;
  background: rgba(0,0,0,0.8); color: #fff; padding: 12px; border-radius: 30px;
  text-align: center; z-index: 100; font-size: 14px; backdrop-filter: blur(8px); display: none;
}

/* ========== 自动播放提示 ========== */
.auto-play-tip {
  position: absolute; bottom: 220px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,0.7); backdrop-filter: blur(8px); color: #fff; padding: 8px 20px;
  border-radius: 40px; font-size: 14px; z-index: 25; white-space: nowrap;
  border: 1px solid rgba(255,255,255,0.2); opacity: 0; transition: opacity 0.3s; pointer-events: none;
}
.auto-play-tip.show { opacity: 1; }

/* ========== 右键菜单 ========== */
.context-menu {
  position: fixed; background: #1e1e1e; border-radius: 12px; padding: 4px 0;
  z-index: 100; min-width: 150px; box-shadow: 0 8px 20px rgba(0,0,0,.6);
  display: none; border: 1px solid #333;
}
.context-menu.show { display: block; }
.context-item { padding: 12px 20px; color: #fff; font-size: 15px; cursor: pointer; }
.context-item:active { background: #2a2a2a; }

/* ========== 公告弹窗 ========== */
.announcement-modal {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7);
  z-index: 1000; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px);
}
.announcement-content {
  background: #1e1e1e; border-radius: 20px; max-width: 320px; width: 90%;
  padding: 20px; border: 1px solid #333; box-shadow: 0 10px 30px rgba(0,0,0,0.5); color: #fff;
}
.announcement-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.announcement-header h3 { margin:0; font-size:18px; color:#ff3355; }
.announcement-close { background:none; border:none; color:#aaa; font-size:24px; cursor:pointer; padding:0; line-height:1; }
.announcement-body { margin-bottom:20px; font-size:15px; line-height:1.5; color:#ddd; max-height:200px; overflow-y:auto; }
.announcement-footer { display:flex; gap:10px; }
.announcement-footer .btn { flex:1; padding:10px; border:none; border-radius:30px; font-size:14px; cursor:pointer; font-weight:500; }
.announcement-footer .btn-primary { background:#ff3355 !important; border-color:#ff3355 !important; color:#fff !important; box-shadow:0 6px 14px rgba(255,51,85,0.3) !important; }
.announcement-footer .btn-primary:hover { background:#e02244 !important; }
.announcement-footer .btn-secondary { background:#333; color:#ccc; }

/* ========== 播放设置面板 ========== */
.play-settings-panel {
  position: absolute; right: 80px; bottom: 140px;
  background: rgba(20,20,30,0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-radius: 24px; padding: 20px; width: 200px; color: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.1);
  z-index: 200; display: none; transition: opacity 0.2s; pointer-events: auto;
}
.play-settings-panel.show { display: block; }
.panel-section { margin-bottom: 20px; }
.panel-section:last-child { margin-bottom: 0; }
.panel-label { font-size: 14px; font-weight: 600; color: #aaa; margin-bottom: 12px; }
.speed-options { display: flex; gap: 8px; justify-content: space-between; }
.speed-option {
  flex: 1; text-align: center; padding: 8px 0; background: rgba(255,255,255,0.1);
  border-radius: 20px; font-size: 14px; font-weight: 600; color: #ddd; cursor: pointer;
  transition: all 0.2s; border: 1px solid transparent;
}
.speed-option.active { background: #ff3355; color: white; box-shadow: 0 4px 10px rgba(255,51,85,0.4); }
.auto-next-section { display: flex; align-items: center; justify-content: space-between; }
.switch { position: relative; display: inline-block; width: 46px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #444; transition: .3s; border-radius: 24px; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .3s; border-radius: 50%; }
input:checked + .slider { background-color: #ff3355; }
input:checked + .slider:before { transform: translateX(22px); }
.next-video-btn {
  width: 100%; padding: 10px; background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2); border-radius: 20px;
  color: #fff; font-size: 13px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: all 0.2s;
}
.next-video-btn:hover { background: rgba(255,255,255,0.15); }
.next-video-btn:active { transform: scale(0.97); }
.next-video-btn span { font-size: 14px; }

/* ========== 评论面板 ========== */
.comment-panel {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(20,20,30,0.98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-radius: 24px 24px 0 0; z-index: 150; display: none; flex-direction: column;
  max-height: 60vh; border-top: 1px solid rgba(255,255,255,0.1);
}
.comment-panel.show { display: flex; }
.comment-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.comment-title { font-size: 16px; font-weight: 700; color: #fff; }
.comment-close { background: none; border: none; color: #aaa; font-size: 24px; cursor: pointer; padding: 0; line-height: 1; }
.comment-audit-tip {
  text-align: center; padding: 10px 20px; font-size: 13px; color: #ffa500;
  background: rgba(255,165,0,0.1); border-bottom: 1px solid rgba(255,255,255,0.05);
}
.comment-closed-tip {
  text-align: center; padding: 10px 20px; font-size: 13px; color: #999;
  background: rgba(150,150,150,0.1); border-bottom: 1px solid rgba(255,255,255,0.05);
}
.comment-list { flex: 1; overflow-y: auto; padding: 12px 0; max-height: 40vh; }
.comment-item { display: flex; padding: 12px 20px; gap: 12px; }
.comment-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.comment-content { flex: 1; }
.comment-name { font-size: 13px; font-weight: 600; color: #ccc; margin-bottom: 4px; display: block; }
.comment-text { font-size: 14px; color: #fff; margin: 0 0 4px; line-height: 1.4; }
.comment-time { font-size: 11px; color: #777; }
.comment-input-area {
  display: flex; align-items: center; padding: 12px 20px; gap: 10px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.comment-input {
  flex: 1; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15);
  border-radius: 24px; padding: 10px 16px; color: #fff; font-size: 14px; outline: none;
}
.comment-input::placeholder { color: #888; }
.image-upload-label { cursor: pointer; font-size: 24px; padding: 5px; color: #aaa; transition: color 0.2s; }
.image-upload-label:hover { color: #ff3355; }
.comment-send-btn {
  background: #ff3355; border: none; border-radius: 24px; padding: 10px 18px;
  color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.2s;
}
.comment-send-btn:hover { background: #e02244; }
.comment-send-btn:disabled { background: #666; cursor: not-allowed; }
.comment-image-preview { max-width: 80px; max-height: 80px; border-radius: 8px; margin: 5px 0; }

/* ========== 模态框 ========== */
.modal-overlay {
  position: fixed; top:0; left:0; right:0; bottom:0;
  background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center;
  z-index: 300; backdrop-filter: blur(4px);
}
.modal-dialog-box {
  background: #1e1e1e; border-radius: 24px; padding: 24px; width: 90%;
  max-width: 320px; border: 1px solid #333;
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}
.modal-dialog-box h3 { margin:0 0 18px; font-size:20px; font-weight:700; color:#fff; }
.modal-dialog-box .form-group { margin-bottom:14px; }
.modal-dialog-box input {
  width:100%; padding:12px 16px; background:#2a2a2a; border:1px solid #444;
  border-radius:14px; color:#fff; font-size:15px; outline:none;
}
.modal-dialog-box input:focus { border-color:#ff3355; }
.modal-btn-group { display:flex; gap:10px; justify-content:flex-end; margin-top:8px; }
.modal-btn-group .btn-primary {
  background: linear-gradient(135deg, #ff3355, #ff6b8b); border: none;
  color: #fff; padding: 10px 22px; border-radius: 20px; font-weight: 600; cursor: pointer;
}
.modal-btn-group .btn-secondary {
  background: #333; border: none; color: #ccc; padding: 10px 22px;
  border-radius: 20px; font-weight: 600; cursor: pointer;
}

/* ========== Bootstrap 模态框深色主题 ========== */
.modal-content { background: #1a1a2e !important; color: #fff !important; border-radius: 20px !important; }
.modal-header { border-bottom: 1px solid #333 !important; }
.modal-footer { border-top: 1px solid #333 !important; }
.close { color: #fff !important; opacity: 0.8; }
.form-control { background: #2a2a4a !important; border: 1px solid #444 !important; color: #fff !important; border-radius: 12px !important; }
.form-control:focus { border-color: #ff3355 !important; box-shadow: 0 0 0 2px rgba(255,51,85,0.3) !important; }
.form-control[disabled], .form-control[readonly] { background: #1a1a2e !important; color: #888 !important; cursor: not-allowed; }
.help-block { color: #aaa !important; font-size: 12px; }
.btn-danger { background: #555 !important; border: none !important; }
.btn-danger:hover { background: #777 !important; }