html, body, #app { height: 100%; margin: 0; }
body { font-family: "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif; }

/* 登录页 */
.login-wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a0a0a 0%, #2E0709 50%, #4a1010 100%);
}
.login-card { width: 380px; padding: 12px 8px; border-radius: 10px; }
.login-title { font-size: 22px; font-weight: 600; text-align: center; color: #2E0709; }
.login-sub { font-size: 13px; color: #999; text-align: center; margin: 6px 0 22px; }

/* 布局 */
.layout { height: 100%; }
.aside { background: #001529; }
.logo {
  height: 60px; line-height: 60px; text-align: center;
  color: #fff; font-size: 17px; font-weight: 600; letter-spacing: 1px;
  background: #002140;
}
.aside .el-menu { border-right: none; }
.header {
  display: flex; align-items: center; justify-content: space-between;
  background: #fff; border-bottom: 1px solid #eee;
}
.page-title { font-size: 16px; font-weight: 600; }
.user-info { cursor: pointer; color: #333; }
.main { background: #f0f2f5; }

/* 通用 */
.toolbar { margin-bottom: 14px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.stat-card { text-align: center; padding: 8px 0; }
.stat-num { font-size: 30px; font-weight: 700; color: #2E0709; }
.stat-label { color: #888; margin-top: 4px; }
.flag-img { width: 34px; height: 22px; object-fit: cover; border-radius: 2px; border: 1px solid #eee; }
.thumb-img { width: 80px; height: 50px; object-fit: cover; border-radius: 4px; }
/* 媒体中心：列表分区标题（全部模式下的 图片/视频 分隔） */
.media-list-section-title {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  margin: 4px 0 10px;
}
/* 媒体中心：批量上传预览网格 */
.pending-photo-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.pending-photo { position: relative; width: 100px; height: 75px; border: 2px solid transparent; border-radius: 4px; overflow: hidden; }
.pending-photo.cover { border-color: #409eff; }
.pending-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pending-cover-tag { position: absolute; top: 2px; left: 2px; background: #409eff; color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 2px; }
.pending-remove { position: absolute; top: 2px; right: 2px; background: rgba(0,0,0,.6); color: #fff; width: 16px; height: 16px; line-height: 16px; text-align: center; border-radius: 50%; cursor: pointer; font-size: 10px; }
.pending-remove:hover { background: #f56c6c; }
.pending-name { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 10px; padding: 1px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 视频开头封面预览（首图优先，无首图显示视频首帧） */
.video-cover-preview {
  margin-top: 8px;
  width: 320px;
  height: 180px;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
  background: #000;
  position: relative;
}
.video-cover-preview img,
.video-cover-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.video-cover-preview::after {
  content: "▶";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 16px;
  pointer-events: none;
}
.preview-flag { width: 36px; height: 24px; object-fit: cover; border-radius: 2px; border: 1px solid #ddd; cursor: pointer; }

/* ========== 富文本编辑器 ========== */
.rich-editor { border: 1px solid #dcdfe6; border-radius: 4px; overflow: hidden; }
.rich-editor:focus-within { border-color: #409eff; }
.rich-toolbar {
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
  padding: 6px 8px; background: #f5f7fa; border-bottom: 1px solid #e4e7ed;
}
.rich-toolbar .el-button + .el-button { margin-left: 0; }
.rich-page-wrap {
  background: #f0f2f5; padding: 18px; max-height: 560px; overflow-y: auto;
  border-top: 1px solid #e4e7ed;
}
.rich-page {
  background: #fff; max-width: 820px; margin: 0 auto;
  padding: 34px 46px; box-shadow: 0 2px 10px rgba(0,0,0,.1); border-radius: 2px;
}
.rich-content {
  min-height: 200px; font-size: 15px; line-height: 1.8; color: #303133; outline: none;
  word-break: break-word;
}
.rich-content ul, .rich-content ol { padding-left: 24px; margin: 4px 0; }
.rich-content li { margin: 2px 0; }
.rich-content table { border-collapse: collapse; margin: 8px 0; }
.rich-content td { border: 1px solid #ccc; padding: 6px 10px; min-width: 60px; }
.rich-content img { max-width: 100%; height: auto; border-radius: 3px; }
.rich-content:empty::before,
.rich-content.is-empty::before {
  content: attr(data-placeholder); color: #c0c4cc; pointer-events: none;
}
.rich-content div, .rich-content p { margin: 4px 0; }
/* 横线（新增横线按钮插入的 <hr>）——编辑器内显示 */
.rich-content hr {
  border: none;
  border-top: 1px solid #535353;
  margin: 24px 0;
}

/* 富文本编辑器：选中图片 */
.rich-content img.rich-img-selected { outline: 3px solid #409eff; border-radius: 3px; }

/* 富文本编辑器：预览弹窗（仿官网新闻详情） */
/* 正文预览：100% 按网页版新闻详情样式渲染（深色背景与官网一致） */
/* 容器复刻官网 .news-detail：深色半透明面板 + 细边框 + 6px 圆角 + 32px 内边距 */
/* 正文预览：完全复刻官网新闻详情页（NewsDetailView）视觉——纯色 #141414 面板（与官网底部同色），
   内边距与官网 .news-detail 一致；字号/行高按官网 5/6 等比缩小（18px/36px → 15px/30px），
   即官网前端显示页面的缩小版本，便于预览时判断颜色/字号/字体的实际效果 */
.rich-preview {
  background: #141414;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 10px 30px;
  max-height: 70vh;
  overflow-y: auto;
}
/* 首页预览：按官网首页轮播图布局模拟（图片 + 顶部标题/摘要黑条 + 底部副标题黑条） */
.home-preview-carousel { position: relative; height: 400px; background: #000; border-radius: 4px; overflow: hidden; }
.home-preview-carousel-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-preview-carousel-top { position: absolute; top: 0; left: 0; width: 100%; box-sizing: border-box; background: rgba(0,0,0,.7); font-size: 18px; line-height: 1.6; padding: 20px 22px; white-space: pre-line; color: #fff; }
.home-preview-carousel-bottom { position: absolute; bottom: 0; left: 0; width: 100%; box-sizing: border-box; min-height: 50px; background: rgba(0,0,0,.7); font-size: 13px; line-height: 1.4; padding: 12px 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; }
.home-preview-empty { color: #999; font-size: 13px; }
/* 以下规则完全复刻官网 NewsDetailView .news-body 的样式，保证预览所见即官网所见 */
.rich-preview-body { font-size: 15px; line-height: 30px; color: #ddd; word-break: break-word; }
/* 注意：不设 text-indent 默认值（与官网 .news-body p 完全一致）——缩进只来自段落的
   内联 text-indent（编辑器的"缩进"按钮），否则预览里点缩进/取消缩进都看不出变化 */
.rich-preview-body p { font-size: 15px; line-height: 30px; color: #ddd; margin-bottom: 13px; text-align: justify; white-space: pre-line; }
/* 历史数据兼容：align 属性（旧粘贴/编辑器产生）不被 text-align:justify 覆盖，保证预览与官网一致 */
.rich-preview-body p[align="center"] { text-align: center; }
.rich-preview-body p[align="left"] { text-align: left; }
.rich-preview-body p[align="right"] { text-align: right; }
.rich-preview-body p[align="justify"] { text-align: justify; }
.rich-preview-body div[align="center"] { text-align: center; }
.rich-preview-body div[align="left"] { text-align: left; }
.rich-preview-body div[align="right"] { text-align: right; }
.rich-preview-body div[align="justify"] { text-align: justify; }
.rich-preview-body p:last-child { margin-bottom: 0; }
/* 与官网一致：旧数据残留的空段落（无内容或仅 <br>）不渲染，避免预览里大片空白 */
.rich-preview-body p:empty,
.rich-preview-body p:has(> br:only-child) { display: none; }
.rich-preview-body div { font-size: 15px; line-height: 30px; color: #ddd; word-break: break-word; }
.rich-preview-body img { max-width: 100%; height: auto; border-radius: 4px; }
/* 独占段落的单图：块级居中；同一段落多张图保持 inline 同行（多图并排） */
.rich-preview-body p:has(> img:only-child) img { display: block; margin: 14px auto; }
/* 并排容器（flex）内的图片：不居中不推散，由 flex 等分 */
.rich-preview-body div[style*="display: flex"] img,
.rich-preview-body div[style*="display:flex"] img { margin: 0; }
.rich-preview-body div[style*="text-align"] p,
.rich-preview-body div[style*="text-align"] { text-indent: 0; }
.rich-preview-body div p { text-indent: 0; margin-bottom: 10px; }
.rich-preview-body div div { margin-bottom: 10px; }
.rich-preview-body h1, .rich-preview-body h2, .rich-preview-body h3 { color: #fff; }
/* 横线（与官网详情页一致） */
.rich-preview-body hr {
  border: none;
  border-top: 1px solid #535353;
  margin: 24px 0;
}
.rich-preview-body ul, .rich-preview-body ol { padding-left: 24px; }
.rich-preview-body table { width: 100%; border-collapse: collapse; }
.rich-preview-body td { border: 1px solid #555; padding: 6px 10px; }

/* ========== 管理页左侧分类树布局（运动员管理 / 教练及裁判） ========== */
.admin-split { display: flex; align-items: flex-start; gap: 16px; }
.admin-split .side-tree {
  width: 250px; flex-shrink: 0; border-right: 1px solid #ebeef5;
  border-radius: 4px; max-height: 70vh; overflow-y: auto;
}
.admin-split .tree-main { flex: 1; min-width: 0; }
.tree-current {
  font-weight: 600; font-size: 14px; line-height: 32px;
  white-space: nowrap; margin-right: 4px;
}
/* 未选择组别时的空提示（进入页面默认不加载数据） */
.tree-empty { padding: 60px 0; }