/* ===================================================================
   spike-components.css — cany_spike 通用 Element-UI 组件样式覆盖
   =================================================================== */

/* ===== el-card — 阴影卡片 ===== */
.el-card {
  border: none !important;
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-card) !important;
  background-color: var(--color-card-bg) !important;
  overflow: hidden;
}

.el-card__header {
  padding: 18px 24px 14px !important;
  border-bottom: 1px solid var(--color-border) !important;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.el-card__body {
  padding: 20px 24px !important;
}

/* ===== 次按鈕（Cancel / btn-no）===== */
.btn-no,
.el-button.btn-cancel {
  background-color: rgba(250, 137, 107, 0.08) !important;
  border: none !important;
  border-radius: var(--radius-button-pill) !important;
  color: var(--color-primary) !important;
  font-weight: 500 !important;
  font-family: var(--font-family) !important;
  transition: all 0.2s ease !important;
}

.btn-no:hover,
.el-button.btn-cancel:hover {
  background-color: rgba(250, 137, 107, 0.15) !important;
  color: var(--color-primary) !important;
}

/* ===== el-button — Spike 按钮风格 ===== */
.el-button {
  border-radius: var(--radius-button) !important;
  font-family: var(--font-family) !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
  border: 1px solid transparent !important;
}

.el-button--primary {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #ffffff !important;
  /*border-radius: var(--radius-button-pill) !important;*/
}

.el-button--primary:hover,
.el-button--primary:focus {
  background-color: #e8795d !important;
  border-color: #e8795d !important;
  box-shadow: 0 4px 12px rgba(250, 137, 107, 0.4) !important;
}

.el-button--primary:active {
  background-color: #d96b4f !important;
  border-color: #d96b4f !important;
}

.el-button--success {
  background-color: var(--color-success) !important;
  border-color: var(--color-success) !important;
  border-radius: var(--radius-button-pill) !important;
}

.el-button--danger {
  background-color: var(--color-danger) !important;
  border-color: var(--color-danger) !important;
  border-radius: var(--radius-button-pill) !important;
}

.el-button--warning {
  background-color: var(--color-warning) !important;
  border-color: var(--color-warning) !important;
  border-radius: var(--radius-button-pill) !important;
}

.el-button--info {
  background-color: var(--color-info) !important;
  border-color: var(--color-info) !important;
  border-radius: var(--radius-button-pill) !important;
}

.el-button--default,
.el-button.is-plain {
  background-color: #ffffff !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-primary) !important;
}

.el-button--default:hover,
.el-button.is-plain:hover {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}

/* ===== el-input ===== */
.el-input__inner {
  height: var(--input-height) !important;
  line-height: var(--input-height) !important;
  border-radius: var(--radius-input) !important;
  border-color: var(--color-input-border) !important;
  color: var(--color-text-primary) !important;
  font-family: var(--font-family) !important;
  font-size: 14px !important;
  transition:
    border-color 0.2s,
    box-shadow 0.2s !important;
}

.el-input__inner::placeholder {
  color: var(--color-text-secondary) !important;
}

.el-input__inner:focus,
.el-textarea__inner:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(250, 137, 107, 0.15) !important;
  outline: none !important;
}

.el-textarea__inner {
  border-radius: var(--radius-input) !important;
  border-color: var(--color-input-border) !important;
  font-family: var(--font-family) !important;
}

/* el-select */
.el-select .el-input__inner {
  cursor: pointer;
}

.el-select-dropdown {
  border-radius: var(--radius-button) !important;
  box-shadow: var(--shadow-dropdown) !important;
  border: 1px solid var(--color-border) !important;
}

.el-select-dropdown__item.selected {
  color: var(--color-primary) !important;
  font-weight: 600 !important;
  background-color: var(--color-primary-light) !important;
}

.el-select-dropdown__item:hover {
  background-color: var(--color-primary-light) !important;
}

/* ===== el-form-item label ===== */
.el-form-item__label {
  color: var(--color-text-primary) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
}

/* ===== el-table — Spike 无边框表格 ===== */
.el-table {
  /*border-radius: var(--radius-card) !important;*/
  font-family: var(--font-family) !important;
  color: var(--color-text-primary) !important;
}

.el-table::before,
.el-table--border::after {
  display: none !important;
}

.el-table th.el-table__cell {
  background-color: transparent !important;
  color: var(--color-text-primary) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  border-bottom: 1px solid var(--color-border) !important;
  padding: 12px 0 !important;
}

.el-table td.el-table__cell {
  border-bottom: 1px solid var(--color-border) !important;
  color: var(--color-text-secondary) !important;
  font-size: 14px !important;
  padding: 12px 0 !important;
}

.el-table__row:hover > td.el-table__cell {
  background-color: var(--color-hover) !important;
}

.el-table--border .el-table__cell {
  border-right: none !important;
}

/* ===== el-tag — Spike 状态标签 ===== */
.el-tag {
  border-radius: var(--radius-tag) !important;
  border: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 0 10px !important;
  height: 24px !important;
  line-height: 24px !important;
}

.el-tag--primary,
.el-tag {
  background-color: var(--color-primary-light) !important;
  color: var(--color-primary) !important;
}

.el-tag--success {
  background-color: var(--color-success-light) !important;
  color: var(--color-success) !important;
}

.el-tag--danger {
  background-color: var(--color-danger-light) !important;
  color: var(--color-danger) !important;
}

.el-tag--warning {
  background-color: var(--color-warning-light) !important;
  color: #b07800 !important;
}

.el-tag--info {
  background-color: var(--color-info-light) !important;
  color: #0891b2 !important;
}

/* ===== el-badge ===== */
.el-badge__content {
  background-color: var(--color-danger) !important;
  border: none !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
}

/* ===== el-pagination — Spike 视觉样式 ===== */
.el-pagination {
  font-family: var(--font-family) !important;
}

/* 统一按钮尺寸：32px 圆形 */
.el-pagination.is-background .el-pager li,
.el-pagination.is-background button.btn-prev,
.el-pagination.is-background button.btn-next {
  min-width: 32px !important;
  height: 32px !important;
  line-height: 32px !important;
  border-radius: 50% !important;
  font-size: 13px !important;
}

/* 非活跃页码：透明底（覆盖 is-background 默认灰色背景）*/
.el-pagination.is-background .el-pager li:not(.disabled):not(.active),
.el-pagination.is-background button.btn-prev,
.el-pagination.is-background button.btn-next {
  background-color: transparent !important;
  border: none !important;
  color: var(--color-text-secondary) !important;
}

/* 当前页：蓝色实心圆 */
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  border-radius: 50% !important;
  color: #fff !important;
}

/* 非活跃页码 hover → 主色文字 */
.el-pagination.is-background .el-pager li:not(.disabled):not(.active):hover {
  color: var(--color-primary) !important;
  background-color: var(--color-hover) !important;
}

/* prev / next 箭头 hover */
.el-pagination.is-background button:hover,
.el-pagination button:hover {
  color: var(--color-primary) !important;
}

/* ===== el-dialog — 弹窗 ===== */
.el-dialog {
  border-radius: var(--radius-card) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
  overflow: hidden;
}

.el-dialog__header {
  padding: 20px 24px 16px !important;
  border-bottom: 1px solid var(--color-border);
}

.el-dialog__title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--color-text-primary) !important;
}

.el-dialog__headerbtn .el-dialog__close {
  color: var(--color-text-secondary) !important;
  font-size: 16px !important;
}

.el-dialog__body {
  padding: 20px 24px !important;
  color: var(--color-text-primary) !important;
}

.el-dialog__footer {
  padding: 14px 24px 20px !important;
  border-top: 1px solid var(--color-border);
}

/* ===== el-message-box — 全局确认弹窗（$confirm / $alert）===== */
.el-message-box {
  border-radius: var(--radius-card) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18) !important;
  overflow: hidden;
  padding-bottom: 0 !important;
  min-width: 380px;
  animation: msgboxEnter 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes msgboxEnter {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(-8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* 标题区 */
.el-message-box__header {
  padding: 20px 24px 16px !important;
  border-bottom: 1px solid var(--color-border);
}

.el-message-box__title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--color-text-primary) !important;
  padding-right: 24px;
  line-height: 1.4 !important;
}

.el-message-box__headerbtn {
  top: 18px !important;
  right: 20px !important;
  width: 28px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  transition: background 0.15s !important;
}

.el-message-box__headerbtn:hover {
  background: var(--color-hover) !important;
}

.el-message-box__close {
  color: var(--color-text-secondary) !important;
  font-size: 16px !important;
  transition: color 0.15s !important;
}

.el-message-box__headerbtn:hover .el-message-box__close {
  color: var(--color-text-primary) !important;
}

/* 内容区 */
.el-message-box__content {
  padding: 20px 24px 16px !important;
}

.el-message-box__container {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
}

.el-message-box__status {
  font-size: 22px !important;
  line-height: 1.4 !important;
  flex-shrink: 0 !important;
}

.el-message-box__message {
  flex: 1 !important;
}

.el-message-box__message p {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--color-text-primary) !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

/* 按钮区 */
.el-message-box__btns {
  padding: 14px 24px 20px !important;
  border-top: 1px solid var(--color-border);
  display: flex !important;
  flex-direction: row-reverse !important;
  justify-content: flex-start !important;
  gap: 10px !important;
}

.el-message-box__btns .el-button {
  height: 40px !important;
  padding: 0 24px !important;
  border-radius: var(--radius-button) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  min-width: 80px !important;
  margin-left: 0 !important;
}

.el-message-box__btns .el-button--default {
  background: var(--color-bg-light) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-secondary) !important;
}

.el-message-box__btns .el-button--default:hover {
  background: var(--color-hover) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border) !important;
}

.el-message-box__btns .el-button--primary {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
}

.el-message-box__btns .el-button--primary:hover {
  opacity: 0.88 !important;
  box-shadow: 0 4px 12px rgba(250, 137, 107, 0.4) !important;
}

/* ===== el-switch — 全局开关组件 ===== */
.el-switch__core {
  border-radius: 12px !important;
  height: 22px !important;
  min-width: 44px !important;
  border-color: var(--color-border) !important;
  background-color: var(--color-border) !important;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease !important;
}

.el-switch__core::after {
  width: 16px !important;
  height: 16px !important;
  top: 2px !important;
  left: 2px !important;
  border-radius: 50% !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
  transition: left 0.2s ease !important;
}

.el-switch.is-checked .el-switch__core {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

.el-switch.is-checked .el-switch__core::after {
  left: calc(100% - 18px) !important;
  margin-left: 0 !important;
  transform: none !important;
}

.el-switch__label {
  font-size: 13px !important;
  color: var(--color-text-secondary) !important;
}

.el-switch__label.is-active {
  color: var(--color-primary) !important;
}

.el-switch.is-disabled .el-switch__core {
  background-color: var(--color-bg-light) !important;
  border-color: var(--color-border) !important;
  cursor: not-allowed !important;
}

.el-switch.is-disabled.is-checked .el-switch__core {
  background-color: rgba(250, 137, 107, 0.4) !important;
  border-color: transparent !important;
}

/* ===== el-tabs ===== */
.el-tabs__item {
  font-family: var(--font-family) !important;
  font-size: 14px !important;
  color: var(--color-text-secondary) !important;
  font-weight: 500 !important;
}

.el-tabs__item.is-active {
  color: var(--color-primary) !important;
  font-weight: 600 !important;
}

.el-tabs__active-bar {
  background-color: var(--color-primary) !important;
  height: 2px !important;
  border-radius: 2px !important;
}

.el-tabs__nav-wrap::after {
  height: 1px !important;
  background-color: var(--color-border) !important;
}

/* ===== el-dropdown ===== */
.el-dropdown-menu {
  border-radius: var(--radius-button) !important;
  box-shadow: var(--shadow-dropdown) !important;
  border: 1px solid var(--color-border) !important;
  padding: 6px !important;
}

.el-dropdown-menu__item {
  border-radius: 6px !important;
  font-size: 13px !important;
  color: var(--color-text-primary) !important;
  padding: 8px 12px !important;
  line-height: 1.4 !important;
}

.el-dropdown-menu__item:hover {
  background-color: var(--color-hover) !important;
  color: var(--color-primary) !important;
}

/* ===== el-popover ===== */
.el-popover {
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-dropdown) !important;
  border: 1px solid var(--color-border) !important;
}

/* ===== el-steps ===== */
.el-step__title.is-process,
.el-step__title.is-finish {
  color: var(--color-text-primary) !important;
  font-weight: 600 !important;
}

.el-step__head.is-finish .el-step__icon,
.el-step__head.is-process .el-step__icon {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
}

.el-step__head.is-finish .el-step__line {
  background-color: var(--color-primary) !important;
}

/* ===== el-loading ===== */
.el-loading-spinner .path {
  stroke: var(--color-primary) !important;
}

/* ===== el-notification / el-message ===== */
.el-notification {
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-dropdown) !important;
}

.el-message {
  border-radius: var(--radius-button) !important;
  box-shadow: var(--shadow-dropdown) !important;
}

/* ===== el-tooltip ===== */
.el-tooltip__popper.is-dark {
  background-color: var(--color-text-primary) !important;
  border-radius: var(--radius-button) !important;
  font-size: 12px !important;
}

/* ===== el-breadcrumb ===== */
.el-breadcrumb__item .el-breadcrumb__inner {
  color: var(--color-text-secondary) !important;
  font-size: 13px !important;
}

.el-breadcrumb__item:last-child .el-breadcrumb__inner {
  color: var(--color-text-primary) !important;
  font-weight: 500 !important;
}

/* ===== el-input-number ===== */
.el-input-number .el-input__inner {
  text-align: left !important;
}

/* ===== el-date-picker ===== */
.el-picker-panel {
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-dropdown) !important;
  border: 1px solid var(--color-border) !important;
}

/* ===== 通用辅助样式 ===== */
.page-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 20px;
}

.card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 4px;
}

.card-subtitle {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 0 0 16px;
}

/* 状态 badge 辅助类 */
.badge-success {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  background: var(--color-success-light);
  color: var(--color-success);
  border-radius: var(--radius-tag);
  font-size: 12px;
  font-weight: 600;
}

.badge-danger {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  background: var(--color-danger-light);
  color: var(--color-danger);
  border-radius: var(--radius-tag);
  font-size: 12px;
  font-weight: 600;
}

.badge-primary {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-radius: var(--radius-tag);
  font-size: 12px;
  font-weight: 600;
}

.badge-warning {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  background: var(--color-warning-light);
  color: #9a6400;
  border-radius: var(--radius-tag);
  font-size: 12px;
  font-weight: 600;
}

/* ===================================================================
   通用列表卡片（list-card）— finance / account / 其他列表页共用
   =================================================================== */
.list-card {
  background: var(--color-card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  margin-bottom: 20px;
  padding: 30px;
}

/* ===== 搜索/筛选工具栏 ===== */
.tab-search-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 16px 24px;
  flex-wrap: wrap;
}

.tab-search-bar.msg-search {
  justify-content: space-between;
}

.msgsearch-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.msgsearch-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.msgsearch-right .el-select {
  width: 180px;
}

.tab-search-bar .el-button {
  height: 36px !important;
  line-height: 36px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.tab-search-bar .el-input__inner,
.tab-search-bar .el-select .el-input__inner {
  height: 36px !important;
  line-height: 36px !important;
}

.tab-search-bar .input-search {
  font-size: 18px !important;
  color: #4a5568 !important;
  cursor: pointer;
}

.tab-search-bar .el-input__prefix {
  display: flex;
  align-items: center;
  padding-left: 4px;
}

/* ===================================================================
   el-checkbox / el-radio — 全局 Spike 主题覆盖（.template 作用域）
   一次覆盖，所有页面的弹窗、表单、表格、独立场景均生效。
   =================================================================== */

/* ── 复选框基础：尺寸与圆角 ── */
.template .el-checkbox__inner {
  width: 16px !important;
  height: 16px !important;
  border-radius: 3px !important;
  transition: all 0.15s;
}

/* ── 复选框：选中 / 半选中 → 主色 ── */
.template .el-checkbox__input.is-checked .el-checkbox__inner,
.template .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

/* ── 复选框：勾号位置适配 16px 盒子 ── */
.template .el-checkbox__inner::after {
  width: 4px !important;
  height: 8px !important;
  left: 4px !important;
  top: 1px !important;
}

/* ── 复选框：选中后标签文字跟主色 ── */
.template .el-checkbox__input.is-checked + .el-checkbox__label {
  color: var(--color-primary) !important;
}

/* ── 表格内复选框：加大到 18px（高特异性覆盖全局 16px）── */
.template .el-table .el-checkbox__inner {
  width: 18px !important;
  height: 18px !important;
  border-radius: 4px !important;
  border: 1.5px solid #d0d7de !important;
  background-color: #fff !important;
}
.template .el-table .el-checkbox__input.is-checked .el-checkbox__inner,
.template .el-table .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}
.template .el-table .el-checkbox__inner::after {
  width: 5px !important;
  height: 9px !important;
  left: 5px !important;
  top: 1px !important;
}

/* ── 单选框基础：尺寸 ── */
.template .el-radio__inner {
  width: 16px !important;
  height: 16px !important;
  transition: all 0.15s;
}

/* ── 单选框：选中 → 主色边框+背景 ── */
.template .el-radio__input.is-checked .el-radio__inner {
  border-color: var(--color-primary) !important;
  background: var(--color-primary) !important;
}

/* ── 单选框：内点白色 ── */
.template .el-radio__input.is-checked .el-radio__inner::after {
  background-color: #fff !important;
  width: 5px !important;
  height: 5px !important;
}

/* ── 单选框：选中后标签文字跟主色 ── */
.template .el-radio__input.is-checked + .el-radio__label {
  color: var(--color-primary) !important;
}

/* ===================================================================
   page-tabs-wrapper — 通用页面级 Tab 导航样式
   使用方式: <div class="page-tabs-wrapper"> + el-tabs 裸包裹，
   每个 tab-pane 内放独立 list-card，对齐财务页风格。
   =================================================================== */
.page-tabs-wrapper .el-tabs__header {
  margin: 0 0 20px !important;
}

.page-tabs-wrapper .el-tabs__nav-wrap::after {
  display: none !important;
}

.page-tabs-wrapper .el-tabs__nav {
  border: none !important;
  height: auto !important;
}

.page-tabs-wrapper .el-tabs__item {
  height: 52px !important;
  line-height: 52px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--color-text-secondary) !important;
  padding: 0 20px !important;
  border: none !important;
  border-radius: 0 !important;
  transition: color 0.2s !important;
}

.page-tabs-wrapper .el-tabs__item:hover {
  color: var(--color-primary) !important;
}

.page-tabs-wrapper .el-tabs__item.is-active {
  color: var(--color-primary) !important;
  font-weight: 600 !important;
}

.page-tabs-wrapper .el-tabs__active-bar {
  background-color: var(--color-primary) !important;
  height: 3px !important;
  border-radius: 3px 3px 0 0 !important;
}

/* ===== list-card 内表格强化 ===== */
.list-card .el-table th.el-table__cell {
  background-color: transparent !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 12px 16px !important;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--color-border) !important;
}

.list-card .el-table td.el-table__cell {
  padding: 16px !important;
  font-size: 14px !important;
}

.list-card .el-table__row:hover > td.el-table__cell {
  background-color: rgba(246, 249, 252, 0.8) !important;
}

.list-card .el-table .cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-card .el-table {
  width: 100% !important;
}

.list-card .el-table::before,
.list-card .el-table--border::after {
  display: none !important;
}

.list-card .el-table__body tr:last-child td.el-table__cell {
  border-bottom: none !important;
}

.list-card .custom-pagination {
  padding: 16px 24px;
  /*border-top: 1px solid var(--color-border);*/
}

.list-card .el-table .el-table-column--selection {
  padding: 0 !important;
  text-align: center !important;
}

.list-card .el-table .el-table-column--selection .cell {
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== 页面英雄头部卡片（全局可用）===== */
.page-hero-card {
  background: var(--color-card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  margin-bottom: 20px;
}

.page-hero-back {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.2s;
  flex-shrink: 0;
}

.page-hero-back:hover {
  background: var(--color-hover);
}

.page-hero-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.page-hero-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.3;
}

.page-hero-desc {
  font-size: 13px;
  color: var(--color-text-secondary);
}

/* 英雄卡片：左侧图标容器（48×48 圆角方块，主色背景）*/
.page-hero-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

/* 英雄卡片：右侧操作行（包含 page-hero-info + 可选操作按钮）*/
.page-hero-title-row {
  /*flex: 1;*/
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

/* ===== 状态胶囊标签（全局可用）===== */
.status-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}
.status-tag.Unpaid {
  background: var(--color-primary);
}
.status-tag.Paid {
  background: #13deb9;
}
.status-tag.Wait {
  background: #ffb22c;
}
.status-tag.Refunded {
  background: #a0aec0;
}
.status-tag.Fail {
  background: var(--color-danger);
}

/* ===== 圆形操作图标按钮（全局可用）===== */
.action-btns {
  display: flex;
  align-items: center;
  gap: 8px;
}
.action-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  transition:
    background 0.2s,
    transform 0.2s;
  flex-shrink: 0;
}
.action-icon-btn:hover {
  transform: scale(1.1);
}
.action-icon-btn.view-btn {
  background: rgba(84, 112, 255, 0.08);
  color: #5470ff;
}
.action-icon-btn.view-btn:hover {
  background: rgba(84, 112, 255, 0.15);
}
.action-icon-btn.pay-btn {
  background: rgba(19, 222, 185, 0.12);
  color: #13deb9;
}
.action-icon-btn.pay-btn:hover {
  background: rgba(19, 222, 185, 0.22);
}
.action-icon-btn.upload-btn {
  background: rgba(250, 137, 107, 0.12);
  color: var(--color-primary);
}
.action-icon-btn.upload-btn:hover {
  background: rgba(250, 137, 107, 0.22);
}
.action-icon-btn.del-btn {
  background: rgba(239, 83, 80, 0.08);
  color: #ef5350;
}
.action-icon-btn.del-btn:hover {
  background: rgba(239, 83, 80, 0.16);
}

/* ===================================================================
   插件页全局样式（html.is-plugin-page） 
   header.php 检测 /plugin/ URL 自动注入 class，无需修改任何插件代码
   =================================================================== */
.is-plugin-page .el-main {
  padding: 20px !important;
}

/* ===== 通用卡片外观（仅视觉属性，不干扰插件内部布局）===== */
/* .is-plugin-page .el-main > div:not(.page-hero-card):not(.list-card):not(.page-tabs-wrapper) { background/radius/shadow } */

/* ===== page-hero-card 在插件页：margin-bottom 提供与下方元素的间距 ===== */
.is-plugin-page .el-main > .page-hero-card {
  margin-bottom: 16px;
}

/* ===== list-card 在插件页：继承基础 padding:30px，与 finance.php 对齐 ===== */

/* ===== el-table：透明，继承卡片白色背景（与 finance.php 一致）===== */
.is-plugin-page .el-main .el-table {
  margin: 0 !important;
}

.is-plugin-page .el-main .el-table th.el-table__cell {
  background-color: transparent !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 12px 24px !important;
  border-bottom: 1px solid var(--color-border) !important;
  color: var(--color-text-primary) !important;
}

.is-plugin-page .el-main .el-table td.el-table__cell {
  padding: 16px 24px !important;
  font-size: 14px !important;
}

.is-plugin-page .el-main .el-table__row:hover > td.el-table__cell,
.is-plugin-page .el-main .el-table__row.hover-row > td.el-table__cell {
  background-color: var(--color-hover) !important;
}

.is-plugin-page
  .el-main
  .el-table__row:not(:hover):not(.hover-row)
  > td.el-table__cell {
  background-color: transparent !important;
}

.is-plugin-page .el-main .el-table::before,
.is-plugin-page .el-main .el-table--border::after {
  display: none !important;
}

.is-plugin-page .el-main .el-table__body tr:last-child td.el-table__cell {
  border-bottom: none !important;
}

.is-plugin-page .el-main .el-table .cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== 分页：卡片底部区域，顶部分隔线 ===== */
.is-plugin-page .el-main .custom-pagination {
  border-top: 1px solid var(--color-border);
  padding: 14px 24px;
  flex-shrink: 0;
}

/* ===== 操作按钮 op-text ===== */
.is-plugin-page .el-main .op-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--radius-btn);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  color: var(--color-primary);
  background: var(--color-primary-light);
  transition: opacity 0.2s;
}

.is-plugin-page .el-main .op-text:hover {
  opacity: 0.8;
}

/* ===================================================================
   合同签订页（signContract）专属样式
   =================================================================== */

/* ===== 信息展示卡片（甲方信息）===== */
.contract-info-card {
  background: var(--color-card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.contract-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 24px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border);
}

/* 2列 key-value 网格 */
.info-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.info-kv-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--color-border);
}

.info-kv-item:last-child,
.info-kv-item.info-kv-full {
  border-bottom: none;
}

.info-kv-item:not(.info-kv-full):nth-child(odd) {
  border-right: 1px solid var(--color-border);
}

.info-kv-full {
  grid-column: 1 / -1;
}

.info-key {
  font-size: 12px;
  color: var(--color-text-secondary);
  font-weight: 500;
}

.info-val {
  font-size: 14px;
  color: var(--color-text-primary);
  font-weight: 500;
  word-break: break-all;
  min-height: 20px;
}

/* 签订元信息条 */
.sign-notice-bar {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 24px;
  background: var(--color-hover);
  border-top: 1px solid var(--color-border);
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.6;
  word-break: break-all;
}

.sign-notice-bar i {
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-primary);
}

/* ===== 合同内容卡片（Tabs 风格）===== */
.contract-content-card {
  background: var(--color-card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.contract-content-card .el-tabs__header {
  border-bottom: 1px solid var(--color-border) !important;
  margin-bottom: 0 !important;
}

.contract-content-card .el-tabs__nav-wrap {
  padding: 0 24px;
}

.contract-content-card .el-tabs__nav-wrap::after {
  display: none !important;
}

.contract-content-card .el-tabs__item {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary) !important;
  height: 52px;
  line-height: 52px;
  padding: 0 16px !important;
}

.contract-content-card .el-tabs__item.is-active {
  color: var(--color-primary) !important;
  font-weight: 600;
}

.contract-content-card .el-tabs__active-bar {
  background-color: var(--color-primary) !important;
}

.contract-body {
  padding: 24px;
  max-height: 480px;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-text-primary);
}

.contract-body::-webkit-scrollbar {
  width: 5px;
}
.contract-body::-webkit-scrollbar-track {
  background: transparent;
}
.contract-body::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 3px;
}

/* ===== 签订操作卡片 ===== */
.sign-action-card {
  background: var(--color-card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
}

/* sign-action-card checkbox 尺寸/颜色由全局 .template 规则覆盖 */
.sign-action-card .el-checkbox__input.is-checked + .el-checkbox__label {
  color: var(--color-text-primary) !important;
}

.sign-action-card .el-checkbox__label {
  font-size: 14px;
  color: var(--color-text-primary);
}

.sign-submit-btn {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
  border-radius: 8px !important;
  height: 40px;
  padding: 0 28px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

.sign-submit-btn:hover,
.sign-submit-btn:focus {
  opacity: 0.88 !important;
  color: #fff !important;
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

/* ===== 签字弹窗 ===== */
.sign-dialog .el-dialog {
  border-radius: 12px !important;
  overflow: hidden;
}

.sign-dialog .el-dialog__header {
  display: none !important;
}

.sign-dialog .el-dialog__body {
  padding: 0 !important;
}

.sign-dialog-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--color-border);
}

.sign-dialog-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.3;
}

.sign-dialog-desc {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 6px 0 0;
}

.canvas-wrap {
  padding: 16px 24px;
}

.canvas-wrap canvas {
  border-radius: 8px;
  border: 1px solid var(--color-border);
  width: 100% !important;
  max-width: 100% !important;
  height: 250px !important;
  display: block;
  background: var(--color-hover);
}

.sign-dialog-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  border-top: 1px solid var(--color-border);
}

.sign-dialog-footer-right {
  display: flex;
  gap: 10px;
}

.sign-dialog-footer .clear-btn {
  border-radius: 8px !important;
  color: var(--color-text-secondary) !important;
  border-color: var(--color-border) !important;
  background: transparent !important;
}

.sign-dialog-footer .cancel-btn {
  border-radius: 8px !important;
  color: var(--color-text-primary) !important;
}

.sign-dialog-footer .save-btn {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}

/* ===================================================================
   合同详情页（contractDetail）专属样式
   =================================================================== */

/* 合同详情卡片 */
.contract-detail-card {
  background: var(--color-card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* 合同正文区（v-html 全文展示，不限高度）*/
.contract-detail-body {
  padding: 24px 32px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-text-primary);
  overflow-x: auto;
}

/* ===== 合同 HTML 内 table 适配 ===== */
.contract-detail-body table {
  width: 100%;
  border-collapse: collapse !important;
  font-size: 13px;
  margin: 12px 0;
  word-break: break-word;
}

.contract-detail-body table th,
.contract-detail-body table td {
  padding: 8px 12px !important;
  border: 1px solid var(--color-border) !important;
  text-align: left;
  vertical-align: top;
  line-height: 1.6;
}

.contract-detail-body table th {
  background: var(--color-hover) !important;
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
}

.contract-detail-body table tr:nth-child(even) td {
  background: rgba(0, 0, 0, 0.01);
}

/* 合同内的图片、签名等自适应宽度 */
.contract-detail-body img {
  max-width: 100%;
  height: auto;
}