/* ===== 基础色与间距 ===== */
:root{
  --bg:#1e293b;         /* 背景：由 #0f172a 调亮 */
  --text:#f1f5f9;       /* 正文：更亮的灰白 */
  --muted:#cbd5e1;      /* 次要文字：由 #9aa4b2 调亮 */
  --card:#273449;       /* 卡片背景：比背景亮一些 */
  --border:#3b4a61;     /* 边框：由 #1f2937 调亮 */
  --radius:12px;
  --gap:16px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Arial,"PingFang SC","Microsoft YaHei",sans-serif;
}

/* 容器与网格 */
.container{max-width:90%;margin:24px auto 48px;padding:0 16px}
.grid{display:grid;grid-template-columns:1fr;gap:var(--gap)}
@media(min-width:980px){.grid{grid-template-columns:1fr 1fr}}

/* 卡片 */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
}
.card h3{margin:0 0 8px;font-size:16px;font-weight:600}
.muted{color:var(--muted);font-size:14px}

/* 视频容器 */
.video-box{
  border:1px solid var(--border);
  border-radius:10px;
  background:#0b1220;
  aspect-ratio:16/9;
  overflow:hidden;
}
.video-box img{width:100%;height:100%;object-fit:contain;display:block}

/* 表格 */
.table-wrap{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
table{width:100%;border-collapse:separate;border-spacing:0;background:var(--card)}
thead th{
  text-align:left;padding:10px 12px;font-size:14px;
  background:#0f1a2f;border-bottom:1px solid var(--border);color:#cfe1ff
}
tbody td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.06)}
tbody tr:hover{background:rgba(255,255,255,.03)}

/* 只读文本框 */
.readonly{
  background:#0b1220;border:1px solid var(--border);
  border-radius:10px;padding:12px;min-height:120px;white-space:pre-wrap
}

/* 标题区 */
.title{font-weight:700;font-size:24px;margin:0 0 4px}
.sub{color:var(--muted);font-size:14px;margin:0}

/* 审核按钮选中样式 */
.btn-selected {
  background-color: #5b8cff !important; /* 选中高亮色 */
  color: #fff !important;
  border-color: #4a74d6 !important;
}

.modal {
  display: none; /* 默认隐藏 */
  position: fixed;
  z-index: 9999; /* 确保在最上层 */
  left: 5%;
  top: 5%;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.6); /* 半透明背景 */
  align-items: center;   /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

.modal-content {
  max-width: 90%;
  max-height: 90%;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0,0,0,0.5);
}

.close {
  position: absolute;
  top: -1%;
  right: 14%;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  z-index: 9999; /* 确保在最上层 */
}
.close:hover {
  color: #ccc;
}