:root {
  --green-900: #123d2d;
  --green-800: #1a5a42;
  --green-700: #237556;
  --green-600: #2f8f68;
  --green-500: #43a879;
  --green-100: #eef9f3;
  --surface: #f7fbf8;
  --surface-strong: #ffffff;
  --text-primary: #1b2a23;
  --text-secondary: #4b6156;
  --border-soft: #d6e6dc;
  --shadow-soft: 0 14px 30px rgba(19, 61, 45, 0.09);
  --shadow-strong: 0 20px 45px rgba(19, 61, 45, 0.16);

  /* 残片/提醒语义色（对应 EP warning 色系，避免各组件硬编码） */
  --accent-warning: #e6a23c;
  --accent-warning-soft: #fff8e1;
  --accent-warning-strong: #b8860b;
  /* 成功/命中语义的浅底与深字（统计卡片、标签共用） */
  --accent-success-soft: #e8f5e9;
  --accent-success-softer: #f1f8e9;
  --accent-success-strong: #2e7d32;
  --accent-success-text: #856404;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
#app {
  min-height: 100%;
}

body {
  margin: 0;
  color: var(--text-primary);
  background:
    radial-gradient(circle at 12% 18%, rgba(67, 168, 121, 0.2), transparent 32%),
    radial-gradient(circle at 85% 0%, rgba(35, 117, 86, 0.14), transparent 28%),
    linear-gradient(165deg, #eef9f3 0%, #f8fcfa 50%, #edf7f1 100%);
  font-family: "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ------------------------------------------------------------------
 * Element Plus 主题对齐
 *
 * EP 默认 success 是黄绿 #67c23a，与本站墨绿主题色相不一致，
 * 且白字压在其上对比度仅 2.24:1（低于 WCAG AA 4.5:1）。
 * 这里统一改写 EP 的 success / primary 色阶，使全站按钮、标签、
 * 开关等组件自动使用主题绿。
 *
 * 注意：本文件在 main.ts 中必须导入在 element-plus 样式之后，
 * 否则同特异度下会被 EP 默认值覆盖。
 * ------------------------------------------------------------------ */
:root {
  /* primary 与 success 同源：本站正向语义统一走 success，primary 仅次级编辑 */
  --el-color-primary: var(--green-700);
  --el-color-primary-light-3: #4a8f74;
  --el-color-primary-light-5: #6ba98f;
  --el-color-primary-light-7: #9cc7b5;
  --el-color-primary-light-8: #bcd9cc;
  --el-color-primary-light-9: #eef9f3;
  --el-color-primary-dark-2: var(--green-800);

  --el-color-success: var(--green-700);
  --el-color-success-light-3: #4a8f74;
  --el-color-success-light-5: #6ba98f;
  --el-color-success-light-7: #9cc7b5;
  --el-color-success-light-8: #bcd9cc;
  --el-color-success-light-9: #eef9f3;
  --el-color-success-dark-2: var(--green-800);
}

#app {
  width: 100%;
}

a {
  color: var(--green-700);
  text-decoration: none;
}

a:hover {
  color: var(--green-800);
}

.page-title {
  margin: 0;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.2;
  letter-spacing: 0.4px;
}

.page-subtitle {
  margin: 10px 0 0;
  color: var(--text-secondary);
  font-size: 15px;
}

.surface-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
}

/* ------------------------------------------------------------------
 * 按钮尺寸收敛
 *
 * EP 默认 large / default / small 三档实测高度为 32 / 32 / 24px：
 * large 与 default 在视觉上无法区分，行内 small 的 24px 又低于触屏
 * 舒适点击区。这里保持两个视觉层级：
 *   主操作 large  → 40px  高
 *   常规/行内 default、small → 至少 28px 高（保留 small 的紧凑感）
 * 字号统一 13px 上限，避免行内按钮字号过小（原为 12px）。
 * ------------------------------------------------------------------ */
.el-button--large {
  --el-button-size: 40px;
  padding: 0 20px;
  font-size: 15px;
}

.el-button--small {
  --el-button-size: 28px;
  font-size: 13px;
}

.el-button--small.is-text,
.el-button--small.is-link {
  padding: 0 8px;
}

/* 按钮操作区统一规范：窄屏下操作按钮纵向全宽 */
.action-row .el-button,
.edit-actions .el-button,
.fragment-edit-actions .el-button,
.task-actions .el-button {
  margin: 0;
}

@media (max-width: 768px) {
  .action-row,
  .edit-actions,
  .fragment-edit-actions,
  .task-actions {
    flex-direction: column;
  }

  .action-row .el-button,
  .edit-actions .el-button,
  .fragment-edit-actions .el-button,
  .task-actions .el-button {
    width: 100%;
  }
}

/* 移动端弹窗适配：覆盖 Element Plus 内联宽度并约束 footer */
@media (max-width: 768px) {
  .el-dialog {
    --el-dialog-width: calc(100% - 24px) !important;
    --el-dialog-margin-top: 5vh;
    max-height: calc(100vh - 60px);
  }

  .el-dialog__body {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
  }

  .el-dialog__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .el-dialog__footer .el-button {
    flex: 1;
    margin-left: 0;
  }

  .el-message-box {
    max-width: calc(100% - 24px);
  }

  .el-message-box__btns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .el-message-box__btns .el-button {
    flex: 1;
    margin-left: 0;
  }
}

.fade-up-enter-active,
.fade-up-leave-active {
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.fade-up-enter-from,
.fade-up-leave-to {
  opacity: 0;
  transform: translateY(8px);
}