:root {
  --ws-btn-primary-start: #1B5CFF;
  --ws-btn-primary-end: #457FFF;
  --ws-btn-primary-border: #1B5CFF;
  --ws-btn-primary-hover-start: #457FFF;
  --ws-btn-primary-hover-end: #6FA1FF;
  --ws-btn-primary-hover-border: #0b5aa0;
  --ws-btn-primary-disabled-start: #8fb9d7;
  --ws-btn-primary-disabled-end: #a8d1e5;
  --ws-btn-primary-disabled-border: #9ec6e3;
  --ws-btn-primary-shadow: 0 14px 24px rgba(15, 108, 189, 0.22);
  --ws-btn-primary-hover-shadow: 0 16px 28px rgba(15, 108, 189, 0.24);
  --ws-btn-ghost-text: #334155;
  --ws-btn-ghost-border: rgba(148, 163, 184, 0.28);
  --ws-btn-ghost-hover-text: #0f5f9e;
  --ws-btn-ghost-hover-border: rgba(15, 108, 189, 0.24);
  --ws-btn-ghost-bg-start: #ffffff;
  --ws-btn-ghost-bg-end: #f8fbff;
  --ws-btn-ghost-shadow: 0 10px 18px rgba(148, 163, 184, 0.08);
}

.ws-filter-actions .btn,
.ws-filter-primary-actions .btn,
.modal-footer .btn,
.ws-btn-main,
.ws-btn-hide,
.ws-btn-close,
.ws-password-toggle,
.account-visibility-btn,
.index-visibility-btn {
  border-radius: 4px !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}

.ws-filter-actions .btn.btn-primary,
.ws-filter-primary-actions .btn.btn-primary,
.modal-footer .btn.btn-primary,
.ws-btn-main,
button.btn.btn-primary[id="search"],
button.btn.btn-primary[id*="Search"],
button.btn.btn-primary[id*="search"] {
  color: #ffffff !important;
  border-color: var(--ws-btn-primary-border) !important;
  background: linear-gradient(135deg, var(--ws-btn-primary-start) 0%, var(--ws-btn-primary-end) 100%) !important;
  background-image: linear-gradient(135deg, var(--ws-btn-primary-start) 0%, var(--ws-btn-primary-end) 100%) !important;
  text-shadow: none !important;
}

.ws-filter-actions .btn.btn-primary:hover,
.ws-filter-actions .btn.btn-primary:focus,
.ws-filter-primary-actions .btn.btn-primary:hover,
.ws-filter-primary-actions .btn.btn-primary:focus,
.modal-footer .btn.btn-primary:hover,
.modal-footer .btn.btn-primary:focus,
.ws-btn-main:hover,
.ws-btn-main:focus,
button.btn.btn-primary[id="search"]:hover,
button.btn.btn-primary[id="search"]:focus,
button.btn.btn-primary[id*="Search"]:hover,
button.btn.btn-primary[id*="Search"]:focus,
button.btn.btn-primary[id*="search"]:hover,
button.btn.btn-primary[id*="search"]:focus {
  color: #ffffff !important;
  border-color: var(--ws-btn-primary-hover-border) !important;
  background: linear-gradient(135deg, var(--ws-btn-primary-hover-start) 0%, var(--ws-btn-primary-hover-end) 100%) !important;
  background-image: linear-gradient(135deg, var(--ws-btn-primary-hover-start) 0%, var(--ws-btn-primary-hover-end) 100%) !important;
  transform: translateY(-1px);
}

.ws-filter-actions .btn.btn-primary[disabled],
.ws-filter-actions .btn.btn-primary.disabled,
.ws-filter-primary-actions .btn.btn-primary[disabled],
.ws-filter-primary-actions .btn.btn-primary.disabled,
.modal-footer .btn.btn-primary[disabled],
.modal-footer .btn.btn-primary.disabled,
.ws-btn-main[disabled],
.ws-btn-main.disabled,
button.btn.btn-primary[id="search"][disabled],
button.btn.btn-primary[id*="Search"][disabled],
button.btn.btn-primary[id*="search"][disabled] {
  color: rgba(255, 255, 255, 0.72) !important;
  border-color: var(--ws-btn-primary-disabled-border) !important;
  background: linear-gradient(135deg, var(--ws-btn-primary-disabled-start) 0%, var(--ws-btn-primary-disabled-end) 100%) !important;
  background-image: linear-gradient(135deg, var(--ws-btn-primary-disabled-start) 0%, var(--ws-btn-primary-disabled-end) 100%) !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: not-allowed;
}

.modal-footer .btn.ws-btn-ghost,
.modal-footer .btn.btn-default,
.modal-footer .btn.btn-outline-secondary,
.ws-btn-hide,
.ws-btn-close {
  color: var(--ws-btn-ghost-text) !important;
  border-color: var(--ws-btn-ghost-border) !important;
  background: linear-gradient(180deg, var(--ws-btn-ghost-bg-start) 0%, var(--ws-btn-ghost-bg-end) 100%) !important;
  background-image: linear-gradient(180deg, var(--ws-btn-ghost-bg-start) 0%, var(--ws-btn-ghost-bg-end) 100%) !important;
  box-shadow: var(--ws-btn-ghost-shadow) !important;
  text-shadow: none !important;
}

.modal-footer .btn.ws-btn-ghost:hover,
.modal-footer .btn.ws-btn-ghost:focus,
.modal-footer .btn.btn-default:hover,
.modal-footer .btn.btn-default:focus,
.modal-footer .btn.btn-outline-secondary:hover,
.modal-footer .btn.btn-outline-secondary:focus,
.ws-btn-hide:hover,
.ws-btn-hide:focus,
.ws-btn-close:hover,
.ws-btn-close:focus {
  color: var(--ws-btn-ghost-hover-text) !important;
  border-color: var(--ws-btn-ghost-hover-border) !important;
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: var(--ws-btn-ghost-shadow) !important;
  transform: translateY(-1px);
}

.modal-footer .btn.ws-btn-ghost[disabled],
.modal-footer .btn.ws-btn-ghost.disabled,
.modal-footer .btn.btn-default[disabled],
.modal-footer .btn.btn-default.disabled,
.modal-footer .btn.btn-outline-secondary[disabled],
.modal-footer .btn.btn-outline-secondary.disabled,
.ws-btn-hide[disabled],
.ws-btn-hide.disabled,
.ws-btn-close[disabled],
.ws-btn-close.disabled {
  color: #94a3b8 !important;
  border-color: rgba(203, 213, 225, 0.9) !important;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
  background-image: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
  box-shadow: none !important;
  cursor: not-allowed;
  transform: none !important;
}

button.btn.ws-password-toggle,
button.btn.account-visibility-btn,
button.btn.index-visibility-btn,
button.btn[title="显示密码"],
button.btn[title="隐藏密码"],
button.btn[aria-label="显示密码"],
button.btn[aria-label="隐藏密码"] {
  min-width: 35px !important;
  width: 35px !important;
  min-height: 35px !important;
  height: 35px !important;
  max-height: 40px !important;
  flex: 0 0 40px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  color: #ffffff !important;
  border-color: var(--ws-btn-primary-border) !important;
  background: linear-gradient(135deg, var(--ws-btn-primary-start) 0%, var(--ws-btn-primary-end) 100%) !important;
  background-image: linear-gradient(135deg, var(--ws-btn-primary-start) 0%, var(--ws-btn-primary-end) 100%) !important;
  box-shadow: var(--ws-btn-primary-shadow) !important;
}

button.btn.ws-password-toggle:hover,
button.btn.ws-password-toggle:focus,
button.btn.account-visibility-btn:hover,
button.btn.account-visibility-btn:focus,
button.btn.index-visibility-btn:hover,
button.btn.index-visibility-btn:focus,
button.btn[title="显示密码"]:hover,
button.btn[title="显示密码"]:focus,
button.btn[title="隐藏密码"]:hover,
button.btn[title="隐藏密码"]:focus,
button.btn[aria-label="显示密码"]:hover,
button.btn[aria-label="显示密码"]:focus,
button.btn[aria-label="隐藏密码"]:hover,
button.btn[aria-label="隐藏密码"]:focus {
  color: #ffffff !important;
  border-color: var(--ws-btn-primary-hover-border) !important;
  background: linear-gradient(135deg, var(--ws-btn-primary-hover-start) 0%, var(--ws-btn-primary-hover-end) 100%) !important;
  background-image: linear-gradient(135deg, var(--ws-btn-primary-hover-start) 0%, var(--ws-btn-primary-hover-end) 100%) !important;
  box-shadow: var(--ws-btn-primary-hover-shadow) !important;
  transform: translateY(-1px);
}

button.btn.ws-password-toggle img,
button.btn.account-visibility-btn img,
button.btn.index-visibility-btn img,
button.btn[title="显示密码"] img,
button.btn[title="隐藏密码"] img,
button.btn[aria-label="显示密码"] img,
button.btn[aria-label="隐藏密码"] img,
button.btn.ws-password-toggle i,
button.btn.account-visibility-btn i,
button.btn.index-visibility-btn i,
button.btn[title="显示密码"] i,
button.btn[title="隐藏密码"] i,
button.btn[aria-label="显示密码"] i,
button.btn[aria-label="隐藏密码"] i {
  width: 18px !important;
  height: 18px !important;
  line-height: 18px !important;
  font-size: 16px !important;
  object-fit: contain;
  color: #ffffff !important;
}

button.btn.ws-password-toggle img,
button.btn.account-visibility-btn img,
button.btn.index-visibility-btn img,
button.btn[title="显示密码"] img,
button.btn[title="隐藏密码"] img,
button.btn[aria-label="显示密码"] img,
button.btn[aria-label="隐藏密码"] img {
  filter: brightness(0) invert(1);
}