/* =============================================================
   基础样式：设计变量、重置、通用组件（前台后台共用）
   配色：深蓝 + 白，简洁正式的校园风格
   ============================================================= */

:root {
  /* 主色 —— 深蓝 */
  --c-primary:        #1a56c4;
  --c-primary-dark:   #0d2d63;
  --c-primary-light:  #e8f0ff;
  --c-primary-hover:  #1546a0;

  /* 中性色 */
  --c-text:      #22304a;
  --c-text-2:    #5a6b86;
  --c-text-3:    #8b98ad;
  --c-border:    #e2e8f2;
  --c-border-2:  #d3dced;
  --c-bg:        #eef2f8;
  --c-bg-soft:   #f6f8fc;
  --c-white:     #ffffff;

  /* 语义色 */
  --c-success:   #1a8b45;
  --c-success-bg:#eefaf1;
  --c-warn:      #d98a13;
  --c-warn-bg:   #fff8ea;
  --c-danger:    #d64545;
  --c-danger-bg: #fdf0f0;
  --c-info-bg:   #eef4ff;

  /* 尺寸 */
  --radius:      10px;
  --radius-sm:   7px;
  --radius-lg:   14px;
  --shadow-sm:   0 1px 3px rgba(15,42,90,.06);
  --shadow:      0 4px 16px rgba(15,42,90,.10);
  --shadow-lg:   0 10px 40px rgba(15,42,90,.16);
  --nav-h:       64px;
  --tab-h:       58px;
  --page-max:    1180px;

  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
          'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  font-family: var(--font);
  font-size: 14px;
  color: var(--c-text);
  background: var(--c-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--c-primary); text-decoration: none; }
a:hover { color: var(--c-primary-hover); }

h1,h2,h3,h4,h5 { margin: 0; font-weight: 600; color: var(--c-primary-dark); }
p { margin: 0 0 10px; }
img { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }

input, textarea, select, button { font-family: inherit; font-size: inherit; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #c8d3e4; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #a9b8d0; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------------- 按钮 ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 18px;
  border: 1px solid var(--c-border-2);
  border-radius: var(--radius-sm);
  background: var(--c-white);
  color: var(--c-text);
  font-size: 14px; font-weight: 500;
  cursor: pointer;
  transition: all .18s ease;
  white-space: nowrap;
  user-select: none;
}
.btn:hover  { border-color: var(--c-primary); color: var(--c-primary); }
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--c-primary); border-color: var(--c-primary); color: #fff;
}
.btn-primary:hover { background: var(--c-primary-hover); border-color: var(--c-primary-hover); color: #fff; }

.btn-success { background: var(--c-success); border-color: var(--c-success); color: #fff; }
.btn-success:hover { background: #157038; border-color: #157038; color: #fff; }

.btn-danger { background: var(--c-danger); border-color: var(--c-danger); color: #fff; }
.btn-danger:hover { background: #b93a3a; border-color: #b93a3a; color: #fff; }

.btn-ghost { background: transparent; border-color: transparent; color: var(--c-text-2); }
.btn-ghost:hover { background: var(--c-bg-soft); color: var(--c-primary); }

/* 危险操作的次要样式：和实心的 .btn-danger（如「驳回」）并排时能区分开 */
.btn-danger-ghost { background: transparent; border-color: #e8c4c4; color: var(--c-danger); }
.btn-danger-ghost:hover { background: var(--c-danger); border-color: var(--c-danger); color: #fff; }

.btn-sm { padding: 6px 13px; font-size: 13px; border-radius: 6px; }
.btn-lg { padding: 12px 30px; font-size: 15px; border-radius: 8px; }
.btn-block { width: 100%; }

.btn[disabled], .btn.is-disabled {
  background: #dfe5ef !important; border-color: #dfe5ef !important;
  color: #a3aec2 !important; cursor: not-allowed; transform: none !important;
}

/* ---------------- 表单 ---------------- */
.field { margin-bottom: 16px; }
.field > label {
  display: block; font-size: 13px; color: var(--c-text-2);
  margin-bottom: 7px; font-weight: 500;
}
.field > label .req { color: var(--c-danger); margin-left: 2px; }

.input, .select, .textarea {
  width: 100%; padding: 10px 13px;
  border: 1px solid var(--c-border-2);
  border-radius: var(--radius-sm);
  background: var(--c-white);
  color: var(--c-text);
  outline: none;
  transition: border-color .18s, box-shadow .18s;
  -webkit-appearance: none; appearance: none;
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(26,86,196,.11);
}
.textarea { min-height: 90px; resize: vertical; line-height: 1.7; }
.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235a6b86' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; padding-right: 34px;
}
.input[disabled], .input[readonly] { background: var(--c-bg-soft); color: var(--c-text-2); }
.field-hint { font-size: 12px; color: var(--c-text-3); margin-top: 6px; line-height: 1.6; }
.field-err  { font-size: 12px; color: var(--c-danger); margin-top: 6px; }

/* 自定义复选框 */
.check { display: inline-flex; align-items: flex-start; gap: 9px; cursor: pointer; font-size: 13.5px; }
.check input { display: none; }
.check i {
  flex: 0 0 auto; width: 17px; height: 17px; margin-top: 2px;
  border: 1.5px solid var(--c-border-2); border-radius: 4px;
  background: #fff; position: relative; transition: .18s;
}
.check input:checked + i { background: var(--c-primary); border-color: var(--c-primary); }
.check input:checked + i::after {
  content: ''; position: absolute; left: 5px; top: 1.5px;
  width: 4px; height: 9px; border: solid #fff;
  border-width: 0 2px 2px 0; transform: rotate(43deg);
}

/* ---------------- 卡片 / 徽章 / 标签 ---------------- */
.card {
  background: var(--c-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--c-border);
}
.card-pad { padding: 20px; }
.card-title {
  font-size: 15px; font-weight: 600; color: var(--c-primary-dark);
  padding: 15px 20px; border-bottom: 1px solid var(--c-border);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.card-title::before {
  content: ''; width: 3px; height: 15px; border-radius: 2px;
  background: var(--c-primary); margin-right: -4px;
}
.card-title > span:first-child { flex: 1; }

/* 分页条（CZ.pager 生成的 DOM）。原先在 admin/assets/admin.css 里，
   但校方端也用分页条、又不加载那个文件，所以挪到这份三端共用的基础样式里。 */
.pager { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 15px; font-size: 13px; color: var(--c-text-2); }

.tag {
  display: inline-flex; align-items: center;
  padding: 2px 9px; border-radius: 20px;
  font-size: 12px; font-weight: 500; line-height: 1.7;
  background: var(--c-bg-soft); color: var(--c-text-2); white-space: nowrap;
}
.tag-blue   { background: var(--c-primary-light); color: var(--c-primary); }
.tag-green  { background: var(--c-success-bg); color: var(--c-success); }
.tag-orange { background: var(--c-warn-bg); color: var(--c-warn); }
.tag-red    { background: var(--c-danger-bg); color: var(--c-danger); }
.tag-gray   { background: #eef1f6; color: #7b8aa3; }
.tag-purple { background: #f2eefc; color: #7847d1; }

/* ---------------- 表格 ---------------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tb { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tb th {
  background: var(--c-bg-soft); color: var(--c-text-2); font-weight: 600;
  text-align: left; padding: 11px 12px; white-space: nowrap;
  border-bottom: 1px solid var(--c-border);
}
table.tb td {
  padding: 12px; border-bottom: 1px solid var(--c-border);
  color: var(--c-text); vertical-align: middle;
}
table.tb tbody tr:hover { background: #fafcff; }
table.tb tbody tr:last-child td { border-bottom: none; }

/* ---------------- 提示 / 空状态 / 加载 ---------------- */
.empty { text-align: center; padding: 54px 20px; color: var(--c-text-3); }
.empty svg { width: 62px; height: 62px; opacity: .3; margin-bottom: 14px; }
.empty p { font-size: 13.5px; margin: 0; }

.loading-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 70px 20px; color: var(--c-text-3); gap: 14px; }
.spinner {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid var(--c-primary-light); border-top-color: var(--c-primary);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------- Toast ---------------- */
.toast-wrap {
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
  z-index: 10000; display: flex; flex-direction: column; align-items: center; gap: 10px;
  pointer-events: none; width: min(92vw, 420px);
}
.toast {
  background: rgba(24,38,64,.95); color: #fff;
  padding: 11px 20px; border-radius: 9px; font-size: 13.5px;
  box-shadow: var(--shadow-lg); line-height: 1.6;
  animation: toastIn .26s cubic-bezier(.2,.9,.3,1.3);
  max-width: 100%; word-break: break-word;
}
.toast.err { background: rgba(180,50,50,.96); }
.toast.ok  { background: rgba(20,120,60,.96); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-14px) scale(.96); } }

/* ---------------- 弹窗 ---------------- */
.modal-layer {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(14,26,48,.55);
  backdrop-filter: blur(2px);
  padding: 20px;
  animation: fadeIn .2s ease;
}
@keyframes fadeIn { from { opacity: 0; } }

.modal {
  background: #fff; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%; max-width: 480px;
  max-height: calc(100vh - 40px);
  display: flex; flex-direction: column;
  animation: modalIn .26s cubic-bezier(.2,.9,.3,1.1);
  overflow: hidden;
}
.modal.modal-lg { max-width: 720px; }
.modal.modal-xl { max-width: 940px; }
@keyframes modalIn { from { opacity: 0; transform: translateY(18px) scale(.97); } }

.modal-head {
  padding: 18px 22px; border-bottom: 1px solid var(--c-border);
  display: flex; align-items: center; justify-content: space-between;
  flex: 0 0 auto;
}
.modal-head h3 { font-size: 16.5px; }
.modal-close {
  width: 30px; height: 30px; border: none; background: transparent;
  font-size: 22px; line-height: 1; color: var(--c-text-3); cursor: pointer;
  border-radius: 6px; display: flex; align-items: center; justify-content: center;
}
.modal-close:hover { background: var(--c-bg-soft); color: var(--c-danger); }

.modal-body { padding: 22px; overflow-y: auto; flex: 1 1 auto; -webkit-overflow-scrolling: touch; }
.modal-foot {
  padding: 15px 22px; border-top: 1px solid var(--c-border);
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  flex: 0 0 auto; background: #fbfcfe; flex-wrap: wrap;
}
.modal-foot .foot-left { margin-right: auto; }

/* ---------------- 图片预览灯箱 ---------------- */
.lightbox {
  position: fixed; inset: 0; z-index: 9600;
  background: rgba(8,14,26,.92);
  display: flex; align-items: center; justify-content: center; padding: 30px;
}
.lightbox img, .lightbox video { max-width: 100%; max-height: 88vh; border-radius: 8px; }
.lb-close {
  position: absolute; top: 16px; right: 24px; color: #fff;
  font-size: 36px; line-height: 1; cursor: pointer; opacity: .8;
}
.lb-close:hover { opacity: 1; }

/* ---------------- 头像 ----------------
   三端共用（前台顶栏 / 我的页 / 后台用户列表与资料复核 / 校方审核页），
   所以放 base.css，不放某个端自己的样式表。

   ★ 类名特意**不叫 .avatar**：前台 app.css 里已经有一个 .avatar（顶栏那个 30px 小圆），
     同名同权重时后加载的样式表赢（前台是 base 之后才加载 app），改尺寸会变成
     "后台改了管用、前台改了不管用"这种极难查的怪事，索性换个名字避开。
   里面要么是用户传的头像 <img>，要么是姓名第一个字（见 api.js 的 CZ.avatarInner）。 */
.cz-av {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden; background: linear-gradient(135deg, #0d2d63, #1a56c4);
  color: #fff; font-size: 14px; font-weight: 600; line-height: 1;
  user-select: none;
}
.cz-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cz-av-sm { width: 26px; height: 26px; font-size: 12px; }
.cz-av-lg { width: 48px; height: 48px; font-size: 19px; }

/* ---------------- 工具类 ---------------- */
.flex { display: flex; }
.flex-c { display: flex; align-items: center; }
.flex-b { display: flex; align-items: center; justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.gap-6 { gap: 6px; } .gap-10 { gap: 10px; } .gap-16 { gap: 16px; }
.mt-0{margin-top:0}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}
.mb-0{margin-bottom:0}.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}
.tc { text-align: center; } .tr { text-align: right; }
.muted { color: var(--c-text-2); } .muted-3 { color: var(--c-text-3); }
.fs12 { font-size: 12px; } .fs13 { font-size: 13px; } .fs15 { font-size: 15px; } .fs16 { font-size: 16px; } .fs18 { font-size: 18px; }
.fw6 { font-weight: 600; }
.nowrap { white-space: nowrap; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ellipsis-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hidden { display: none !important; }

/* hidden 属性必须压过作者样式里的 display。
   .lightbox / .modal-layer 等元素自己写了 display:flex（类选择器与 [hidden]
   同权重），会把浏览器默认样式表的 [hidden]{display:none} 顶掉。
   后果：带着 hidden 的灯箱依然全屏渲染，z-index 又高于弹窗层，
   于是挡住整个页面、吞掉所有点击和滚轮，且它右上角那个 × 还没绑事件。 */
[hidden] { display: none !important; }


.pre-wrap { white-space: pre-wrap; word-break: break-word; line-height: 1.85; }

/* ---------------- 响应式 ---------------- */
@media (max-width: 768px) {
  .modal { max-width: 100%; max-height: calc(100vh - 24px); border-radius: 12px; }
  .modal-layer { padding: 12px; align-items: flex-end; }
  .modal-head { padding: 15px 17px; }
  .modal-body { padding: 17px; }
  .modal-foot { padding: 13px 17px; }
  .modal-foot .btn { flex: 1 1 auto; }
  .toast-wrap { top: 12px; }
}