/* ============================================================
   wxj_student OJ 全站主题 v3 —— 浅色清爽 · 深蓝主色
   v3 关键新增：#oj-content 的蓝色卡通底纹是【内联样式】
   background-image:url('/background.jpg')，只有 !important 能覆盖
   ============================================================ */

:root {
  --wxj-primary: #2563eb;
  --wxj-primary-dark: #1d4ed8;
  --wxj-primary-light: #eef4ff;
  --wxj-bg: #f4f6fb;
  --wxj-ink: #1e293b;
  --wxj-ink2: #64748b;
  --wxj-line: #e6ebf3;
  --wxj-radius: 12px;
}

/* ---------- 全局底色与字体 ---------- */
html body {
  background: var(--wxj-bg) !important;
  color: var(--wxj-ink);
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', sans-serif !important;
}
/* ★ v3 核心：内容区蓝色卡通底纹是内联样式，必须 !important 压制 */
html body #oj-content {
  background: var(--wxj-bg) !important;
  background-image: none !important;
}
html body #app a { color: var(--wxj-primary); }
html body ::selection { background: #dbeafe; }

/* 细滚动条 */
body ::-webkit-scrollbar { width: 8px; height: 8px; }
body ::-webkit-scrollbar-thumb { background: #c9d4e3; border-radius: 4px; }
body ::-webkit-scrollbar-thumb:hover { background: #a9b9cd; }
body ::-webkit-scrollbar-track { background: transparent; }

/* ---------- 顶部导航：白底 + 胶囊高亮 ---------- */
html body .el-menu.el-menu--horizontal {
  background: #fff !important;
  border-bottom: 1px solid var(--wxj-line) !important;
}
html body #app .el-menu--horizontal > .el-menu-item,
html body #app .el-menu--horizontal > .el-submenu .el-submenu__title {
  color: #475569 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 999px;
  margin: 4px 2px;
  transition: background .18s, color .18s;
}
html body #app .el-menu--horizontal .el-menu-item:hover,
html body #app .el-menu--horizontal .el-submenu .el-submenu__title:hover {
  color: var(--wxj-primary) !important;
  background: var(--wxj-primary-light) !important;
  border-bottom: 2px solid transparent !important;
}
html body #app .el-menu--horizontal .el-menu-item.is-active,
html body #app .el-menu--horizontal .el-submenu.is-active .el-submenu__title {
  color: var(--wxj-primary) !important;
  background: var(--wxj-primary-light) !important;
  border-bottom: 2px solid transparent !important;
  font-weight: 600 !important;
}
html body #app .el-menu--horizontal .el-menu-item.is-active i,
html body #app .el-menu--horizontal .el-submenu.is-active i { color: var(--wxj-primary) !important; }

/* ---------- 按钮 ---------- */
html body #app .el-button {
  border-radius: 10px;
  font-weight: 500;
  transition: all .18s;
}
html body #app .el-button--primary,
html body #app .el-button--info {
  background: var(--wxj-primary) !important;
  border-color: var(--wxj-primary) !important;
}
html body #app .el-button--primary:hover,
html body #app .el-button--primary:focus {
  background: var(--wxj-primary-dark) !important;
  border-color: var(--wxj-primary-dark) !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, .3);
}
html body #app .el-button--text { color: var(--wxj-primary) !important; font-weight: 500; }
html body #app .el-button--default:hover,
html body #app .el-button--default:focus {
  color: var(--wxj-primary) !important;
  border-color: #bfd6ff !important;
  background: var(--wxj-primary-light) !important;
}

/* ---------- 输入框 ---------- */
html body #app .el-input__inner,
html body #app .el-textarea__inner {
  border-radius: 10px;
  border-color: var(--wxj-line);
  transition: border-color .2s, box-shadow .2s;
}
html body #app .el-input__inner:focus,
html body #app .el-textarea__inner:focus {
  border-color: var(--wxj-primary) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

/* ---------- 卡片：16px 大圆角 + 浮起阴影 ---------- */
html body #app .el-card {
  border-radius: 16px !important;
  border: none !important;
  box-shadow: 0 1px 2px rgba(15, 34, 82, .04), 0 6px 20px rgba(15, 34, 82, .06) !important;
  overflow: hidden;
}
html body #app .el-card__header {
  border-bottom: 1px solid var(--wxj-line) !important;
  background: #f9fbfe !important;          /* v5：统一淡蓝灰卡头（覆盖团队页粉/绿/橙色头） */
  font-weight: 700;
  color: var(--wxj-ink);
}
/* ---------- 团队页卡片 ---------- */
html body #app a.group-name {
  color: #16336e !important;
  font-weight: 700 !important;
  font-size: 15px;
}
html body #app a.group-name:hover { color: var(--wxj-primary) !important; }
html body #app .group-brief { color: var(--wxj-ink2) !important; }
html body #app .el-col .el-card { transition: transform .18s, box-shadow .18s; }
html body #app .el-col .el-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(15, 34, 82, .12) !important;
}
/* 旧版自定义 .box-card 同步处理 */
html body #app .box-card {
  border-radius: 16px !important;
  border: none !important;
  box-shadow: 0 1px 2px rgba(15, 34, 82, .04), 0 6px 20px rgba(15, 34, 82, .06) !important;
}
/* 旧版 .panel-title（区块大标题）：加深加粗 */
html body #app .panel-title {
  font-weight: 700 !important;
  color: #16336e !important;
  letter-spacing: .5px;
}

/* ---------- 弹窗 / 浮层 ---------- */
html body .el-dialog {
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(15, 34, 82, .2) !important;
}
html body .el-dialog__header { border-bottom: 1px solid var(--wxj-line); padding-bottom: 14px; }
html body .el-dialog__footer { border-top: 1px solid var(--wxj-line); padding-top: 14px; }
html body .el-popover, html body .el-dropdown-menu {
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(15, 34, 82, .13) !important;
}
html body .el-dropdown-menu__item:hover { background: var(--wxj-primary-light) !important; color: var(--wxj-primary) !important; }

/* ---------- 表格（element 表格 + vxe 表格） ---------- */
html body #app .el-table th.el-table__cell {
  background: #f1f5fb !important;
  color: #47586e !important;
  font-weight: 600;
}
html body #app .el-table td.el-table__cell,
html body #app .el-table th.el-table__cell { border-bottom: 1px solid #eef2f7 !important; }
html body #app .el-table__body tr:hover > td.el-table__cell { background: #f3f8ff !important; }
html body #app .vxe-table .vxe-header--column {
  background: #f1f5fb !important;
  color: #47586e !important;
  font-weight: 600;
}
html body #app .vxe-table--border { border-color: var(--wxj-line) !important; }

/* ---------- 分页 ---------- */
html body #app .el-pagination.is-background .el-pager li:not(.disabled).active {
  background: var(--wxj-primary) !important;
  border-radius: 8px;
}
html body #app .el-pagination.is-background .el-pager li,
html body #app .el-pagination.is-background .btn-prev,
html body #app .el-pagination.is-background .btn-next {
  border-radius: 8px;
  background: #fff !important;
  border: 1px solid var(--wxj-line);
}

/* ---------- 标签页 / 标签 ---------- */
html body #app .el-tabs__item { color: #64748b; transition: color .2s; }
html body #app .el-tabs__item.is-active,
html body #app .el-tabs__item:hover { color: var(--wxj-primary) !important; }
html body #app .el-tabs__active-bar { background: var(--wxj-primary) !important; }
html body #app .el-tag { border-radius: 8px; }

/* ---------- 开关 / 复选 / 单选 ---------- */
html body #app .el-switch.is-checked .el-switch__core { background: var(--wxj-primary) !important; border-color: var(--wxj-primary) !important; }
html body #app .el-checkbox__input.is-checked .el-checkbox__inner,
html body #app .el-radio__input.is-checked .el-radio__inner { background: var(--wxj-primary) !important; border-color: var(--wxj-primary) !important; }
html body #app .el-checkbox__input.is-checked + .el-checkbox__label,
html body #app .el-radio__input.is-checked + .el-radio__label { color: var(--wxj-primary) !important; }

/* ---------- 下拉选项 / Loading / 消息提示 ---------- */
html body .el-select-dropdown__item.selected { color: var(--wxj-primary) !important; font-weight: 600; }
html body .el-loading-spinner .path { stroke: var(--wxj-primary); }
html body .el-message { border-radius: 12px; border: none; box-shadow: 0 10px 30px rgba(15,34,82,.15) !important; }
html body .el-message--success { background: #ecfdf5 !important; color: #059669 !important; }
html body .el-message--error   { background: #fef2f2 !important; color: #dc2626 !important; }
html body .el-message--info    { background: #eff6ff !important; color: #2563eb !important; }

/* ---------- 页脚 ---------- */
html body #app .mundb-footer { color: var(--wxj-ink2) !important; }

/* ---------- 代码区（题面/提交）：深蓝黑底护眼 ---------- */
html body #app pre, html body #app code { border-radius: 8px; }
html body #app .hljs {
  background: #0f172a !important;
  color: #e2e8f0 !important;
  border-radius: 10px;
}