/* =============================================================================
 * SKIN — core
 * -----------------------------------------------------------------------------
 * Loaded AFTER the vendored legacy stylesheets (assets/admin/css/main.css,
 * assets/staff/css/main.css, assets/themes/primary/css/main.css) on the tenant
 * ADMIN, STAFF and USER surfaces only. The public marketing site is untouched.
 *
 * It restyles the shared component vocabulary those sheets already define —
 * custom--card, table, form--control, btn, badge, alert, pagination,
 * custom--tab, no-data-found — so every ported page modernises at once without
 * a single change to page markup. Chrome (header/sidebar) lives in the sibling
 * panel.css / portal.css.
 *
 * Rules of engagement:
 *   - Match or beat the legacy selector's specificity; we win ties on order.
 *   - `!important` ONLY where the legacy rule already used it.
 *   - Keep every class name and DOM contract intact — this is paint, not surgery.
 * ========================================================================== */

:root {
  /* Neutral ramp. Deliberately cool-grey, not the theme's violet-tinted greys. */
  --sk-line: 220 16% 91%;
  --sk-line-soft: 220 16% 94%;
  --sk-surface: 0 0% 100%;
  --sk-surface-sunken: 220 24% 98%;
  --sk-ink: 222 28% 18%;
  --sk-ink-soft: 220 12% 40%;
  --sk-ink-faint: 220 10% 55%;

  --sk-radius-sm: 8px;
  --sk-radius: 12px;
  --sk-radius-lg: 16px;
  --sk-radius-pill: 999px;

  /* Two-part shadows: a tight contact shadow plus a wide, very soft ambient. */
  --sk-shadow-xs: 0 1px 2px hsl(220 30% 12% / 0.05);
  --sk-shadow-sm: 0 1px 2px hsl(220 30% 12% / 0.05), 0 4px 12px -6px hsl(220 30% 12% / 0.12);
  --sk-shadow-md: 0 1px 2px hsl(220 30% 12% / 0.05), 0 12px 28px -12px hsl(220 30% 12% / 0.18);
  --sk-shadow-lg: 0 2px 4px hsl(220 30% 12% / 0.05), 0 24px 48px -20px hsl(220 30% 12% / 0.22);

  --sk-ring: 0 0 0 3px hsl(var(--base) / 0.16);
  --sk-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --sk-dur: 0.16s;
}

/* --------------------------------------------------------------------------
 * Typography
 * The legacy sheet sets body text to 1.125rem in the portal, which reads
 * oversized in dense banking tables. Normalise both surfaces to 15px.
 * ----------------------------------------------------------------------- */
body {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: hsl(var(--sk-ink-soft));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  color: hsl(var(--sk-ink));
  letter-spacing: -0.011em;
  font-weight: 600;
}

/* Numbers in a banking UI should align in columns and never wobble. */
.table td, .table th,
.dashboard-card__number,
.dashboard-widget-1__number,
.withdraw__card__number,
.header-2__user__balance,
.main-sidebar__user__balance {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* --------------------------------------------------------------------------
 * Focus — the legacy sheet strips outlines in several places. Put a single,
 * consistent, keyboard-only ring back everywhere.
 * ----------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid hsl(var(--base));
  outline-offset: 2px;
  border-radius: var(--sk-radius-sm);
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}

/* --------------------------------------------------------------------------
 * Cards
 * ----------------------------------------------------------------------- */
/*
 * `height: 100%` (vendor main.css) assumes ONE card per grid column. Every
 * admin page instead stacks several cards inside a single `.col-12`, and a
 * Bootstrap `.row` is a flex container, so that column is a stretched flex item
 * with a definite height — the sum of all its cards. Each card then resolved
 * 100% against that sum and inflated to the height of the entire page.
 *
 * Default to auto and restore equal-height only for the layout the vendor rule
 * was written for: a card that is the sole child of its column.
 */
.custom--card {
  height: auto;
  background-color: hsl(var(--sk-surface));
  border: 1px solid hsl(var(--sk-line));
  border-radius: var(--sk-radius-lg);
  box-shadow: var(--sk-shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--sk-dur) var(--sk-ease);
}

[class*="col-"] > .custom--card:only-child {
  height: 100%;
}

.custom--card.no-shadow {
  box-shadow: none;
}

.custom--card .card-header {
  padding: 16px 20px;
  background: transparent;
  border-bottom: 1px solid hsl(var(--sk-line-soft));
  border-radius: 0;
  color: hsl(var(--sk-ink));
  min-height: 0;
}

.custom--card .card-header .title,
.custom--card .card-header .card-title {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.006em;
  color: hsl(var(--sk-ink));
  line-height: 1.4;
}

.custom--card .card-body {
  padding: 20px;
}

.custom--card .card-body .card-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: hsl(var(--sk-ink));
  margin-bottom: 16px;
}

.custom--card .card-subtitle {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: hsl(var(--sk-ink-faint));
  padding-bottom: 0;
  border-bottom: 0;
  margin-bottom: 14px;
}

.custom--card .card-footer {
  padding: 14px 20px;
  background: hsl(var(--sk-surface-sunken));
  border-top: 1px solid hsl(var(--sk-line-soft));
}

@media screen and (max-width: 991px) {
  .custom--card .card-header { padding: 14px 16px; }
  .custom--card .card-body { padding: 16px; }
  .custom--card .card-footer { padding: 12px 16px; }
}

/* --------------------------------------------------------------------------
 * Tables
 * The legacy look is a full grid — every cell boxed in on four sides. Strip the
 * vertical rules and keep horizontal ones, which is far easier to scan.
 * ----------------------------------------------------------------------- */
.table-responsive {
  min-height: 0;
  border-radius: var(--sk-radius);
}

.table {
  box-shadow: none;
  border-radius: var(--sk-radius);
  background-color: hsl(var(--sk-surface));
  overflow: hidden;
}

/* Inside a card the table is already framed — drop its own border + radius. */
.custom--card .card-body > .table-responsive > .table,
.custom--card .card-body > .table {
  border-radius: 0;
}

.table thead tr th {
  padding: 11px 16px;
  font-family: var(--body-font);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: hsl(var(--sk-ink-faint));
  background-color: hsl(var(--sk-surface-sunken));
  border: 0;
  border-bottom: 1px solid hsl(var(--sk-line)) !important;
  backdrop-filter: none;
  white-space: nowrap;
}

.table thead tr th:first-child { border-radius: var(--sk-radius) 0 0 0; }
.table thead tr th:last-child { border-radius: 0 var(--sk-radius) 0 0; }

.table tbody tr {
  border-bottom: 0;
  transition: background-color var(--sk-dur) var(--sk-ease);
}

.table tbody tr td {
  padding: 13px 16px;
  color: hsl(var(--sk-ink));
  font-weight: 450;
  border: 0;
  border-bottom: 1px solid hsl(var(--sk-line-soft));
  vertical-align: middle;
}

.table tbody tr:last-child td {
  border-bottom: 0;
}

/* Zebra striping plus hover reads as noise; hover alone is enough signal. */
.table.table--striped > tbody > tr:nth-of-type(odd) > * {
  background: transparent;
}

.table tbody tr:hover > td {
  background: hsl(var(--base) / 0.035);
}

.table tbody tr:hover > td.no-data-table {
  background: transparent;
}

/* First column is the row's identity — give it weight. */
.table tbody tr td:first-child {
  font-weight: 500;
  color: hsl(var(--sk-ink));
}

/* --------------------------------------------------------------------------
 * Responsive tables — below the breakpoint each row becomes a stacked card of
 * label/value pairs. Keep that contract, restyle the result.
 * ----------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .table--responsive--md tbody tr,
  .table--responsive--sm tbody tr {
    border: 1px solid hsl(var(--sk-line)) !important;
    border-radius: var(--sk-radius) !important;
    margin-bottom: 10px;
    background: hsl(var(--sk-surface));
    overflow: hidden;
  }

  .table--responsive--md tbody tr td,
  .table--responsive--sm tbody tr td {
    border: 0 !important;
    border-bottom: 1px solid hsl(var(--sk-line-soft)) !important;
    border-radius: 0 !important;
    padding: 10px 14px;
  }

  .table--responsive--md tbody tr td:last-child,
  .table--responsive--sm tbody tr td:last-child {
    border-bottom: 0 !important;
  }

  .table--responsive--md tbody tr td::before,
  .table--responsive--sm tbody tr td::before {
    font-family: var(--body-font);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: hsl(var(--sk-ink-faint));
  }

  .table--responsive--md tbody tr:hover > td,
  .table--responsive--sm tbody tr:hover > td {
    background: transparent;
  }
}

/* --------------------------------------------------------------------------
 * Empty state
 * ----------------------------------------------------------------------- */
.no-data-found {
  padding: 36px 0;
  gap: 4px;
}

.no-data-found img {
  max-width: 72px;
  margin: 0 auto 12px;
  opacity: 0.5;
}

.no-data-found span {
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--sk-ink-faint));
}

.table tbody tr td.no-data-table {
  border-bottom: 0;
}

/* --------------------------------------------------------------------------
 * Vertical rhythm
 * The vendor sheet zeroes every paragraph margin (`p { margin: 0 }`), so any
 * intro copy in a card sat flush against the first form label beneath it.
 * ----------------------------------------------------------------------- */
.card-body > p,
.card-body > .alert,
.card-body > .row + .row {
  margin-bottom: 16px;
}

.card-body > p:last-child,
.card-body > .alert:last-child {
  margin-bottom: 0;
}

.card-body > p + .row,
.card-body > .alert + .row {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
 * Forms
 * ----------------------------------------------------------------------- */
.form--label {
  font-size: 0.8125rem;
  font-weight: 550;
  color: hsl(var(--sk-ink));
  margin-bottom: 6px;
  letter-spacing: 0;
}

.form--label.required::after {
  color: hsl(var(--danger));
  margin-left: 2px;
}

.form--control {
  min-height: 42px;
  padding: 8px 13px;
  font-size: 0.9375rem;
  line-height: 1.5;
  border: 1px solid hsl(var(--sk-line));
  border-radius: var(--sk-radius-sm);
  color: hsl(var(--sk-ink));
  box-shadow: var(--sk-shadow-xs);
  transition: border-color var(--sk-dur) var(--sk-ease), box-shadow var(--sk-dur) var(--sk-ease);
}

.form--control::placeholder {
  color: hsl(var(--sk-ink-faint));
  opacity: 1;
}

.form--control:hover:not(:disabled):not([readonly]) {
  border-color: hsl(var(--sk-ink-faint) / 0.55);
}

.form--control:focus {
  border-color: hsl(var(--base));
  box-shadow: var(--sk-ring);
  outline: none;
}

.form--control:disabled,
.form--control[readonly] {
  background-color: hsl(var(--sk-surface-sunken)) !important;
  color: hsl(var(--sk-ink-faint));
  box-shadow: none;
  cursor: not-allowed;
}

.form--control--sm {
  min-height: 34px;
  padding: 4px 10px;
  font-size: 0.875rem;
}

.form--control[type="file"] {
  padding: 0;
  line-height: 40px;
}

.form--control[type="file"]::file-selector-button {
  border: 0;
  border-right: 1px solid hsl(var(--sk-line));
  background-color: hsl(var(--sk-surface-sunken)) !important;
  color: hsl(var(--sk-ink)) !important;
  font-size: 0.875rem;
  font-weight: 550;
  line-height: 40px;
  padding: 0 16px;
}

.form--control[type="file"]:hover::file-selector-button {
  background-color: hsl(var(--base) / 0.08) !important;
  color: hsl(var(--base-d-200)) !important;
}

/* A colour picker stretched to the full column width reads as a filled banner
   rather than a control. Cap it at swatch size. */
.form--control[type="color"] {
  height: 42px;
  width: 84px;
  min-width: 84px;
  padding: 4px;
  cursor: pointer;
}

.form--control[type="color"]::-webkit-color-swatch {
  border: 0;
  border-radius: 6px;
}
.form--control[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

textarea.form--control {
  min-height: 110px;
  line-height: 1.6;
  padding-top: 10px;
}

.input--group .form--control:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input--group .input-group-text {
  background: hsl(var(--sk-surface-sunken));
  border: 1px solid hsl(var(--sk-line));
  border-left: 0;
  border-radius: 0 var(--sk-radius-sm) var(--sk-radius-sm) 0;
  color: hsl(var(--sk-ink-soft));
  font-size: 0.875rem;
  font-weight: 550;
  padding: 0 14px;
}

/* --------------------------------------------------------------------------
 * Buttons
 * The legacy sheet sets colours with !important, so overrides must match it.
 * ----------------------------------------------------------------------- */
.btn {
  border-radius: var(--sk-radius-sm);
  font-size: 0.9375rem;
  font-weight: 550;
  letter-spacing: 0;
  padding: 9px 18px;
  line-height: 1.4;
  transition: background-color var(--sk-dur) var(--sk-ease),
    border-color var(--sk-dur) var(--sk-ease),
    box-shadow var(--sk-dur) var(--sk-ease),
    transform var(--sk-dur) var(--sk-ease);
}

.btn:active {
  transform: translateY(1px);
}

.btn:disabled,
.btn.disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.btn--sm {
  padding: 5px 12px;
  font-size: 0.8125rem;
  border-radius: var(--sk-radius-sm);
}

.btn--base {
  background-color: hsl(var(--base)) !important;
  border-color: hsl(var(--base)) !important;
  color: hsl(var(--white)) !important;
  box-shadow: var(--sk-shadow-xs);
}

.btn--base:hover,
.btn--base:focus,
.btn--base:focus-visible,
.btn--base.active {
  background-color: hsl(var(--base-d-100)) !important;
  border-color: hsl(var(--base-d-100)) !important;
  box-shadow: var(--sk-shadow-sm);
}

.btn-outline--base {
  border-color: hsl(var(--base) / 0.45) !important;
}

.btn-outline--base:hover {
  background-color: hsl(var(--base)) !important;
  border-color: hsl(var(--base)) !important;
}

/* --------------------------------------------------------------------------
 * Badges — solid saturated blocks become tinted pills, which sit far more
 * quietly inside a dense table.
 * ----------------------------------------------------------------------- */
.badge {
  font-family: var(--body-font) !important;
  font-size: 0.75rem !important;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 4px 10px !important;
  border-radius: var(--sk-radius-pill) !important;
  line-height: 1.4;
  border: 0;
}

.badge--success { background-color: hsl(var(--success) / 0.12) !important; color: hsl(var(--success-d-300)) !important; }
.badge--danger  { background-color: hsl(var(--danger) / 0.12) !important;  color: hsl(var(--danger-d-300)) !important; }
.badge--warning { background-color: hsl(var(--warning) / 0.16) !important; color: hsl(var(--warning-d-400)) !important; }
.badge--info    { background-color: hsl(var(--info) / 0.12) !important;    color: hsl(var(--info-d-300)) !important; }
.badge--primary { background-color: hsl(var(--primary) / 0.12) !important; color: hsl(var(--primary-d-300)) !important; }
.badge--base    { background-color: hsl(var(--base) / 0.12) !important;    color: hsl(var(--base-d-200)) !important; }
.badge--secondary { background-color: hsl(var(--sk-ink-faint) / 0.14) !important; color: hsl(var(--sk-ink-soft)) !important; }

/* --------------------------------------------------------------------------
 * Alerts — a left accent bar instead of a fully tinted slab.
 * ----------------------------------------------------------------------- */
.alert {
  border: 1px solid hsl(var(--sk-line));
  border-left-width: 3px;
  border-radius: var(--sk-radius-sm);
  padding: 13px 16px;
  box-shadow: var(--sk-shadow-xs);
}

.alert__title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: hsl(var(--sk-ink));
  display: block;
  margin-bottom: 2px;
}

.alert__desc,
.alert__content {
  font-size: 0.875rem;
  color: hsl(var(--sk-ink-soft));
}

.alert--success { background: hsl(var(--success) / 0.06); border-left-color: hsl(var(--success)); }
.alert--danger  { background: hsl(var(--danger) / 0.06);  border-left-color: hsl(var(--danger)); }
.alert--warning { background: hsl(var(--warning) / 0.08); border-left-color: hsl(var(--warning)); }
.alert--info    { background: hsl(var(--info) / 0.06);    border-left-color: hsl(var(--info)); }

/* --------------------------------------------------------------------------
 * Tabs — a segmented control rather than a row of outlined boxes.
 * ----------------------------------------------------------------------- */
.custom--tab {
  border-bottom: 0;
  padding: 4px;
  gap: 2px;
  background: hsl(var(--sk-surface-sunken));
  border: 1px solid hsl(var(--sk-line));
  border-radius: var(--sk-radius);
  display: inline-flex;
  margin-bottom: 20px;
}

.custom--tab .nav-item { padding: 0; }

.custom--tab .nav-link {
  padding: 7px 16px !important;
  border: 0 !important;
  border-radius: var(--sk-radius-sm);
  font-size: 0.875rem;
  font-weight: 550;
  color: hsl(var(--sk-ink-soft));
  background-color: transparent !important;
  transition: all var(--sk-dur) var(--sk-ease);
}

.custom--tab .nav-link:hover {
  color: hsl(var(--sk-ink));
  background-color: hsl(var(--base) / 0.06) !important;
}

.custom--tab .nav-link.active,
.custom--tab .nav-link.active:hover {
  color: hsl(var(--sk-ink)) !important;
  background-color: hsl(var(--sk-surface)) !important;
  box-shadow: var(--sk-shadow-xs);
}

.custom--tab .nav-link.active .badge {
  background-color: hsl(var(--base) / 0.14) !important;
  color: hsl(var(--base-d-200)) !important;
}

/* --------------------------------------------------------------------------
 * Pagination
 * ----------------------------------------------------------------------- */
.pagination { margin-top: 24px; gap: 4px; }

.pagination .page-item .page-link {
  margin: 0;
  height: 34px;
  min-width: 34px;
  border-radius: var(--sk-radius-sm);
  border: 1px solid hsl(var(--sk-line));
  background: hsl(var(--sk-surface));
  color: hsl(var(--sk-ink-soft));
  font-size: 0.875rem;
  font-weight: 550;
  transition: all var(--sk-dur) var(--sk-ease);
}

.pagination .page-item .page-link:hover {
  background-color: hsl(var(--base) / 0.08);
  border-color: hsl(var(--base) / 0.35);
  color: hsl(var(--base-d-200));
}

.pagination .page-item.active .page-link {
  background-color: hsl(var(--base));
  border-color: hsl(var(--base));
  color: hsl(var(--white));
}

.pagination .page-item.disabled .page-link {
  opacity: 0.45;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
 * Auth screens — the `account` chrome shared by every sign-in, registration,
 * password-reset and verification page across all three tenant surfaces.
 * ----------------------------------------------------------------------- */
.account__form__wrap .custom--card,
.account__form__container {
  border-radius: var(--sk-radius-lg);
  box-shadow: var(--sk-shadow-lg);
}

.account__form__container {
  background: hsl(var(--sk-surface));
  border: 1px solid hsl(var(--sk-line));
  padding: 28px;
}

/*
 * The vendor splits this screen 50/50: a photo panel on one side and the form
 * on the other. AuthShell only ever renders the form half, so the right half of
 * the viewport was left completely blank. Let the backdrop cover the page and
 * centre the card in it.
 */
.account__bg {
  width: 100%;
}

/* The brand panel is also a 50% slab, which left a hard seam down the middle
   once the card was centred. */
@media screen and (min-width: 992px) {
  .account::before {
    width: 100%;
  }
}

.account__form {
  width: 100%;
  padding: 0 24px;
}

.account__form__logo {
  display: block;
  max-width: 190px;
  max-height: 48px;
  object-fit: contain;
  margin: 0 auto 10px;
}

.account__form__title {
  font-size: 1.375rem;
  font-weight: 650;
  letter-spacing: -0.018em;
  color: hsl(var(--sk-ink));
  margin-bottom: 2px;
}

.account .form-group {
  margin-bottom: 14px;
}

.account .forgot-password {
  font-size: 0.875rem;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
 * Action toasts (components/Toast.tsx)
 * ----------------------------------------------------------------------- */
.sk-toast-wrap {
  position: fixed;
  top: 84px;
  right: 20px;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

@media screen and (max-width: 575px) {
  .sk-toast-wrap {
    top: auto;
    bottom: 16px;
    left: 16px;
    right: 16px;
  }
}

.sk-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 280px;
  max-width: 400px;
  padding: 13px 14px;
  border: 1px solid hsl(var(--sk-line));
  border-left-width: 3px;
  border-radius: var(--sk-radius);
  background: hsl(var(--sk-surface));
  box-shadow: var(--sk-shadow-lg);
  animation: sk-toast-in 0.22s var(--sk-ease);
}

@keyframes sk-toast-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.sk-toast--success { border-left-color: hsl(var(--success)); }
.sk-toast--danger  { border-left-color: hsl(var(--danger)); }

.sk-toast__icon {
  flex-shrink: 0;
  font-size: 1.125rem;
  line-height: 1.35;
}
.sk-toast--success .sk-toast__icon { color: hsl(var(--success)); }
.sk-toast--danger .sk-toast__icon  { color: hsl(var(--danger)); }

.sk-toast__msg {
  flex: 1;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.45;
  color: hsl(var(--sk-ink));
}

.sk-toast__close {
  flex-shrink: 0;
  border: 0;
  background: none;
  padding: 0 2px;
  line-height: 1;
  color: hsl(var(--sk-ink-faint));
  cursor: pointer;
  transition: color var(--sk-dur) var(--sk-ease);
}
.sk-toast__close:hover { color: hsl(var(--sk-ink)); }

/* --------------------------------------------------------------------------
 * Misc
 * ----------------------------------------------------------------------- */
.text--secondary,
.text--muted {
  color: hsl(var(--sk-ink-faint)) !important;
}

hr { border-color: hsl(var(--sk-line)); opacity: 1; }

/* Thin, unobtrusive scrollbars on the scroll containers the theme marks up. */
.scroll::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.scroll::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track {
  background: transparent;
}
.scroll::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb {
  background: hsl(var(--sk-ink-faint) / 0.32);
  border-radius: var(--sk-radius-pill);
}
.scroll::-webkit-scrollbar-thumb:hover,
.table-responsive::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--sk-ink-faint) / 0.5);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:active { transform: none; }
}