:root {
  --btn-bg-start: #3b0764;
  --btn-bg-end: #7e22ce;
  --btn-accent: #e879f9;
  --btn-accent-soft: rgba(217, 70, 239, 0.55);
  --btn-text: #ffffff;
  --btn-border: rgba(232, 121, 249, 0.85);
  --btn-shadow: rgba(126, 34, 206, 0.45);
  --btn-inner-highlight: rgba(255, 255, 255, 0.32);
}

button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.btn,
.button,
a.btn,
a.button,
a[role="button"],
.page-link,
.paginate_button,
.dt-button,
.dropdown-toggle,
.ui-button,
.swal-button,
.sweet-alert button,
.scroll-to-top,
.header-mobile-view-btn,
.app-theme-toggle-btn,
.mobile-acc-btn,
.mobile-acc-mini-btn,
.mobile-acc-detail-btn,
.mobile-acc-paste-btn,
.mobile-acc-history-mode-btn,
.mobile-acc-history-page-btn,
.mobile-member-btn,
.mobile-mini-btn,
.btn-submit {
  --btn-bg-start: #3b0764;
  --btn-bg-end: #7e22ce;
  --btn-accent: #e879f9;
  --btn-accent-soft: rgba(217, 70, 239, 0.55);
  --btn-text: #ffffff;
  --btn-border: rgba(232, 121, 249, 0.85);
  --btn-shadow: rgba(126, 34, 206, 0.45);
  --btn-inner-highlight: rgba(255, 255, 255, 0.32);
  background: linear-gradient(135deg, var(--btn-bg-start), var(--btn-bg-end)) !important;
  border: 1px solid var(--btn-border) !important;
  color: var(--btn-text) !important;
  border-radius: 14px !important;
  box-shadow:
    0 8px 22px var(--btn-shadow),
    0 0 14px var(--btn-accent-soft),
    inset 0 1px 8px var(--btn-inner-highlight) !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    color 0.2s ease,
    filter 0.2s ease !important;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
.btn:hover,
.button:hover,
a.btn:hover,
a.button:hover,
a[role="button"]:hover,
.page-link:hover,
.paginate_button:hover,
.dt-button:hover,
.dropdown-toggle:hover,
.ui-button:hover,
.swal-button:hover,
.sweet-alert button:hover,
.scroll-to-top:hover,
.header-mobile-view-btn:hover,
.app-theme-toggle-btn:hover,
.mobile-acc-btn:hover,
.mobile-acc-mini-btn:hover,
.mobile-acc-detail-btn:hover,
.mobile-acc-paste-btn:hover,
.mobile-acc-history-mode-btn:hover,
.mobile-acc-history-page-btn:hover,
.mobile-member-btn:hover,
.mobile-mini-btn:hover,
.btn-submit:hover {
  border-color: var(--btn-accent) !important;
  color: var(--btn-text) !important;
  box-shadow:
    0 10px 28px var(--btn-shadow),
    0 0 20px var(--btn-accent-soft),
    0 0 6px var(--btn-accent),
    inset 0 1px 10px var(--btn-inner-highlight) !important;
  text-decoration: none !important;
  transform: translateY(-1px);
  filter: saturate(1.08) brightness(1.06);
}

button:active,
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
.btn:active,
.btn.active,
.button:active,
a.btn:active,
a.button:active,
a[role="button"]:active,
.page-link:active,
.page-link.active,
.paginate_button:active,
.paginate_button.current,
.dt-button:active,
.dt-button.active,
.dropdown-toggle:active,
.ui-button:active,
.ui-button.ui-state-active,
.swal-button:active,
.sweet-alert button:active,
.scroll-to-top:active,
.header-mobile-view-btn:active,
.app-theme-toggle-btn:active,
.mobile-acc-btn:active,
.mobile-acc-mini-btn:active,
.mobile-acc-detail-btn:active,
.mobile-acc-paste-btn:active,
.mobile-acc-history-mode-btn:active,
.mobile-acc-history-mode-btn.active,
.mobile-acc-history-page-btn:active,
.mobile-acc-history-page-btn.active,
.mobile-member-btn:active,
.mobile-mini-btn:active,
.btn-submit:active {
  transform: translateY(0);
  background: linear-gradient(135deg, var(--btn-bg-end), var(--btn-bg-start)) !important;
  box-shadow:
    0 4px 12px var(--btn-shadow),
    inset 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}

button:focus,
input[type="button"]:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
.btn:focus,
.btn.focus,
.button:focus,
a.btn:focus,
a.button:focus,
a[role="button"]:focus,
.page-link:focus,
.paginate_button:focus,
.dt-button:focus,
.dropdown-toggle:focus,
.ui-button:focus,
.swal-button:focus,
.sweet-alert button:focus,
.scroll-to-top:focus,
.header-mobile-view-btn:focus,
.app-theme-toggle-btn:focus,
.mobile-acc-btn:focus,
.mobile-acc-mini-btn:focus,
.mobile-acc-detail-btn:focus,
.mobile-acc-paste-btn:focus,
.mobile-acc-history-mode-btn:focus,
.mobile-acc-history-page-btn:focus,
.mobile-member-btn:focus,
.mobile-mini-btn:focus,
.btn-submit:focus {
  outline: none !important;
  box-shadow:
    0 10px 28px var(--btn-shadow),
    0 0 0 3px var(--btn-accent-soft),
    0 0 16px var(--btn-accent-soft),
    inset 0 1px 10px var(--btn-inner-highlight) !important;
}

.btn-primary,
.btn-outline-primary,
.dt-button.buttons-copy,
.dt-button.buttons-excel,
.dt-button.buttons-csv,
.dt-button.buttons-pdf,
.sweet-alert button.confirm,
.swal-button--confirm,
.mobile-acc-btn-primary,
.btn-submit,
button[type="submit"],
input[type="submit"] {
  --btn-bg-start: #3b0764;
  --btn-bg-end: #7e22ce;
  --btn-accent: #e879f9;
  --btn-accent-soft: rgba(217, 70, 239, 0.55);
  --btn-text: #ffffff;
  --btn-border: rgba(232, 121, 249, 0.85);
  --btn-shadow: rgba(126, 34, 206, 0.45);
  --btn-inner-highlight: rgba(255, 255, 255, 0.32);
}

.btn-success,
.btn-outline-success,
.mobile-acc-btn-green,
.mobile-member-btn-primary,
.mobile-member-badge-yes {
  --btn-bg-start: #052e16;
  --btn-bg-end: #16a34a;
  --btn-accent: #86efac;
  --btn-accent-soft: rgba(34, 197, 94, 0.45);
  --btn-text: #ffffff;
  --btn-border: rgba(134, 239, 172, 0.8);
  --btn-shadow: rgba(22, 163, 74, 0.38);
  --btn-inner-highlight: rgba(255, 255, 255, 0.28);
}

.btn-warning,
.btn-outline-warning {
  --btn-bg-start: #78350f;
  --btn-bg-end: #f59e0b;
  --btn-accent: #fde68a;
  --btn-accent-soft: rgba(245, 158, 11, 0.45);
  --btn-text: #ffffff;
  --btn-border: rgba(253, 230, 138, 0.85);
  --btn-shadow: rgba(245, 158, 11, 0.38);
  --btn-inner-highlight: rgba(255, 255, 255, 0.28);
}

.btn-danger,
.btn-outline-danger,
.sweet-alert button.cancel,
.swal-button--cancel,
.mobile-acc-btn-danger,
.mobile-acc-mini-btn.delete,
.btn-delete,
.btn-remove {
  --btn-bg-start: #7f1d1d;
  --btn-bg-end: #dc2626;
  --btn-accent: #fca5a5;
  --btn-accent-soft: rgba(239, 68, 68, 0.45);
  --btn-text: #ffffff;
  --btn-border: rgba(252, 165, 165, 0.82);
  --btn-shadow: rgba(220, 38, 38, 0.38);
  --btn-inner-highlight: rgba(255, 255, 255, 0.28);
}

.btn-info,
.btn-outline-info,
.dt-button.buttons-print,
.mobile-acc-mini-btn.verify,
.mobile-acc-detail-btn,
.mobile-acc-paste-btn,
.header-mobile-view-btn {
  --btn-bg-start: #082f49;
  --btn-bg-end: #0284c7;
  --btn-accent: #7dd3fc;
  --btn-accent-soft: rgba(14, 165, 233, 0.45);
  --btn-text: #ffffff;
  --btn-border: rgba(125, 211, 252, 0.82);
  --btn-shadow: rgba(2, 132, 199, 0.38);
  --btn-inner-highlight: rgba(255, 255, 255, 0.28);
}

.btn-secondary,
.btn-outline-secondary,
.dt-button,
.ui-button,
.btn-light,
.btn-outline-light,
.btn-dark,
.btn-outline-dark,
.mobile-acc-btn-dark,
.mobile-acc-btn-outline,
.mobile-acc-mini-btn.copy,
.mobile-acc-history-page-btn,
.mobile-member-btn-secondary,
.mobile-member-btn-outline,
.mobile-mini-btn,
.app-theme-toggle-btn,
.sweet-alert button.cancel,
.swal-button--cancel,
.bootstrap-select > .dropdown-toggle {
  --btn-bg-start: #1e1b4b;
  --btn-bg-end: #475569;
  --btn-accent: #cbd5e1;
  --btn-accent-soft: rgba(148, 163, 184, 0.35);
  --btn-text: #ffffff;
  --btn-border: rgba(203, 213, 225, 0.6);
  --btn-shadow: rgba(71, 85, 105, 0.3);
  --btn-inner-highlight: rgba(255, 255, 255, 0.22);
}

.btn-link {
  --btn-bg-start: rgba(30, 27, 75, 0.82);
  --btn-bg-end: rgba(76, 29, 149, 0.82);
  --btn-accent: #e879f9;
  --btn-accent-soft: rgba(217, 70, 239, 0.38);
  --btn-text: #ffffff;
  --btn-border: rgba(232, 121, 249, 0.55);
  --btn-shadow: rgba(76, 29, 149, 0.26);
}

.btn-sm,
.btn-group-sm > .btn,
.mobile-acc-mini-btn,
.mobile-acc-history-page-btn,
.mobile-mini-btn {
  border-radius: 12px !important;
}

.btn-lg,
.btn-group-lg > .btn,
.btn-user,
.btn-submit {
  border-radius: 20px !important;
}

.btn-circle,
.scroll-to-top,
.close {
  border-radius: 999px !important;
}

.btn-group > .btn,
.btn-group-vertical > .btn,
.input-group > .input-group-prepend > .btn,
.input-group > .input-group-append > .btn {
  border-radius: 14px !important;
}

button:disabled,
button.disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled,
.btn.disabled,
.btn:disabled,
.button.disabled,
.button:disabled,
a.btn.disabled,
.page-link.disabled,
.paginate_button.disabled,
.dt-button.disabled,
.dt-button:disabled,
.ui-button:disabled,
.swal-button:disabled,
.sweet-alert button[disabled],
.mobile-acc-btn[disabled],
.mobile-acc-mini-btn[disabled],
.mobile-member-btn[disabled],
.btn-submit:disabled {
  --btn-bg-start: #64748b;
  --btn-bg-end: #94a3b8;
  --btn-accent: #cbd5e1;
  --btn-accent-soft: rgba(148, 163, 184, 0.12);
  --btn-text: rgba(255, 255, 255, 0.65);
  --btn-border: rgba(203, 213, 225, 0.35);
  --btn-shadow: rgba(100, 116, 139, 0.15);
  --btn-inner-highlight: rgba(255, 255, 255, 0.12);
  color: var(--btn-text) !important;
  opacity: 0.68 !important;
  box-shadow:
    0 4px 12px var(--btn-shadow),
    inset 0 1px 8px var(--btn-inner-highlight) !important;
  transform: none !important;
  filter: none !important;
  cursor: not-allowed !important;
  pointer-events: none;
}

button i,
.btn i,
.button i,
.mobile-acc-btn i,
.mobile-member-btn i,
.btn-submit i {
  color: inherit;
}

html.app-theme-dark-root button,
html.app-theme-dark-root input[type="button"],
html.app-theme-dark-root input[type="submit"],
html.app-theme-dark-root input[type="reset"],
html.app-theme-dark-root .btn,
html.app-theme-dark-root .button,
html.app-theme-dark-root a.btn,
html.app-theme-dark-root a.button,
html.app-theme-dark-root a[role="button"],
html.app-theme-dark-root .page-link,
html.app-theme-dark-root .paginate_button,
body.app-theme-dark button,
body.app-theme-dark input[type="button"],
body.app-theme-dark input[type="submit"],
body.app-theme-dark input[type="reset"],
body.app-theme-dark .btn,
body.app-theme-dark .button,
body.app-theme-dark a.btn,
body.app-theme-dark a.button,
body.app-theme-dark a[role="button"],
body.app-theme-dark .page-link,
body.app-theme-dark .paginate_button {
  color: var(--btn-text) !important;
}