/* ==========================================================================
   上传页科技蓝视觉皮肤（仅视觉，不改文案 / DOM / JS）
   全部规则作用域在 body[data-page="upload"]，不影响其他页面。
   色板与首页/后台一致：主蓝 #2E6BE6 / 深蓝 #1D4FD7 / 亮蓝 #5EA8F7 / 青 #2FD4C4
   ========================================================================== */

body[data-page="upload"] {
  --bg: #F4F8FD;
  --panel: #FFFFFF;
  --panel-soft: #EAF2FC;
  --text: #16233B;
  --muted: #5B6B84;
  --line: #D8E3F2;
  --accent: #2E6BE6;
  --accent-strong: #1D4FD7;
  --brand: #2E6BE6;
  --shadow: 0 18px 45px rgba(30, 79, 215, 0.12);
  background:
    linear-gradient(135deg, rgba(46, 107, 230, 0.08), transparent 35%),
    linear-gradient(180deg, #FAFCFF 0%, var(--bg) 100%);
}

/* ---------- 按钮体系 ---------- */

body[data-page="upload"] .btn {
  background: linear-gradient(135deg, #2E6BE6 0%, #1D4FD7 100%);
  color: #FFFFFF;
}

body[data-page="upload"] .btn:hover {
  background: #1D4FD7;
}

body[data-page="upload"] .btn.secondary {
  background: #EAF2FC;
  border: 1px solid #D8E3F2;
  color: #1D4FD7;
}

body[data-page="upload"] .btn.secondary:hover {
  background: #DCE9FA;
  border-color: #C3D6F0;
  color: #1D4FD7;
}

body[data-page="upload"] .btn.ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
}

body[data-page="upload"] .btn.ghost:hover {
  background: #EAF2FC;
  color: var(--text);
}

/* ---------- 表单 ---------- */

body[data-page="upload"] input:focus,
body[data-page="upload"] select:focus,
body[data-page="upload"] textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(46, 107, 230, 0.14);
}

body[data-page="upload"] input:disabled {
  background: #F4F8FD;
}

body[data-page="upload"] input[type="checkbox"] {
  accent-color: var(--accent);
}

/* ---------- 上传类型切换 Tab ---------- */

body[data-page="upload"] .upload-type-btn.is-active {
  background: linear-gradient(135deg, #2E6BE6 0%, #1D4FD7 100%);
  color: #FFFFFF;
  box-shadow: 0 8px 18px rgba(29, 79, 215, 0.24);
}

/* ---------- 拖拽上传区 ---------- */

body[data-page="upload"] .upload-drop-zone {
  border-color: rgba(46, 107, 230, 0.45);
  background:
    linear-gradient(180deg, rgba(234, 242, 252, 0.9), rgba(255, 255, 255, 0.88)),
    var(--panel-soft);
}

body[data-page="upload"] .upload-drop-zone.is-dragging {
  border-color: var(--accent);
  background:
    linear-gradient(180deg, rgba(220, 235, 253, 0.96), rgba(255, 255, 255, 0.92)),
    var(--panel-soft);
  box-shadow: 0 12px 32px rgba(29, 79, 215, 0.16);
}

body[data-page="upload"] .upload-drop-mark {
  background: linear-gradient(135deg, #2E6BE6 0%, #5EA8F7 100%);
  color: #FFFFFF;
  box-shadow: 0 10px 24px rgba(29, 79, 215, 0.28);
}

/* ---------- 上传进度 ---------- */

body[data-page="upload"] .upload-progress-track {
  background: #D8E3F2;
}

body[data-page="upload"] .upload-progress-track span {
  background: linear-gradient(90deg, #2E6BE6 0%, #5EA8F7 100%);
}

/* ---------- 上传结果（成功换青，失败红语义保留） ---------- */

body[data-page="upload"] .upload-result {
  border-color: rgba(47, 212, 196, 0.4);
  background: rgba(47, 212, 196, 0.1);
}

body[data-page="upload"] .upload-result-meta span {
  border-color: rgba(47, 212, 196, 0.35);
  background: rgba(255, 255, 255, 0.7);
  color: #0B857A;
}

/* ---------- 通知 ---------- */

body[data-page="upload"] .notice {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(22, 35, 59, 0.78);
  color: rgba(240, 246, 255, 0.92);
}

body[data-page="upload"] .notice.success {
  border-color: rgba(47, 212, 196, 0.45);
  color: #7DEDE2;
}

/* ---------- 顶栏导航：去按钮化 + 尺寸统一（与后台一致） ---------- */

body[data-page="upload"] .topbar .nav-actions {
  gap: 6px;
}

body[data-page="upload"] .topbar .nav-actions .btn,
body[data-page="upload"] .topbar .nav-actions .tag {
  min-height: 36px;
  height: 36px;
  padding: 0 12px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}

body[data-page="upload"] .topbar .nav-actions .tag {
  background: transparent;
  border: 0;
  color: var(--muted);
  padding: 0 8px;
}

body[data-page="upload"] .topbar .nav-actions .btn.secondary {
  background: transparent;
  border: 0;
  color: var(--text);
}

body[data-page="upload"] .topbar .nav-actions .btn.secondary:hover {
  background: #EAF2FC;
  border: 0;
  color: var(--accent-strong);
}

body[data-page="upload"] .topbar .nav-actions .btn.ghost {
  background: transparent;
  border: 0;
  color: var(--muted);
}

body[data-page="upload"] .topbar .nav-actions .btn.ghost:hover {
  background: rgba(204, 51, 68, 0.08);
  color: #CC3344;
}