:root {
  --ui-ink: #f5f5f1;
  --ui-blue: #5b96be;
  --ui-blue-hover: #70a9d0;
  --ui-amber: #a86d18;
  --ui-red: #a84f55;
  --ui-red-hover: #bd5e64;
  --ui-surface: #303436;
  --ui-surface-hover: #41494d;
  --ui-border: #647074;
}

.ui-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-height: 56px;
  padding: 10px 17px;
  border: 1px solid var(--ui-border);
  border-radius: 2px;
  background: var(--ui-surface);
  color: var(--ui-ink);
  text-align: left;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.015em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform-origin: center;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .18s ease;
}
.ui-button[hidden] { display: none !important; }
.ui-button__label { min-width: 0; flex: 1; }
.ui-button > .fa-icon { font-size: 1.12em; }
.ui-button:hover:not(:disabled) { background: var(--ui-surface-hover); border-color: #8a9699; color: #fff; }
.ui-button:not(.ui-button--icon):hover:not(:disabled) { transform: scale(1.025); box-shadow: 0 5px 18px rgba(0,0,0,.13); }
.ui-button:focus-visible { outline: 2px solid #e4eaeb; outline-offset: 2px; }
.ui-button:not(.ui-button--icon):active:not(:disabled) { transform: translateY(1px); }
.ui-button:disabled { opacity: .42; cursor: default; }

.ui-button--primary { background: var(--ui-blue); border-color: var(--ui-blue); color: #fff; }
.ui-button--primary:hover:not(:disabled) { background: var(--ui-blue-hover); border-color: var(--ui-blue-hover); }
.ui-button--danger { background: var(--ui-red); border-color: var(--ui-red); color: #fff; }
.ui-button--danger:hover:not(:disabled) { background: var(--ui-red-hover); border-color: var(--ui-red-hover); }
.ui-button--compact { min-height: 46px; padding: 8px 14px; font-size: 15px; }
.ui-button--hero { flex: none; justify-content: space-between; width: 100%; min-height: 66px; font-size: 18px; font-weight: 800; }
.ui-button--icon { justify-content: center; flex: none; width: 48px; min-height: 48px; padding: 0; border: 0; background: transparent; }
.ui-button--icon:hover:not(:disabled) { border-color: transparent; background: rgba(255,255,255,.07); }
.ui-button--icon:active:not(:disabled) { opacity: .65; }
.ui-button--icon-outside { position: relative; width: calc(100% - 38px); margin-left: 38px; }
.ui-button--icon-outside > .fa-icon,
.ui-button__outside-icon { position: absolute; top: 50%; left: -38px; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; color: #b9c4c7; transform: translateY(-50%); transition: color .18s ease, filter .18s ease, transform .2s cubic-bezier(.2,.8,.2,1); }
.ui-button--icon-outside:hover:not(:disabled) > .fa-icon,
.ui-button--icon-outside:hover:not(:disabled) > .ui-button__outside-icon,
.ui-button--icon-outside:focus-visible > .fa-icon,
.ui-button--icon-outside:focus-visible > .ui-button__outside-icon { color: #fff; filter: drop-shadow(0 0 5px rgba(255,255,255,.4)); transform: translateY(-50%) scale(1.15); }
.ui-button__outside-icon > .fa-icon { width: 100%; height: 100%; }
.ui-button--hero.ui-button--icon-outside { width: calc(100% - 38px); margin-left: 38px; }
.ui-button--icon:hover:not(:disabled) { color: #fff; transform: scale(1.1); }
@media (hover: none) { .ui-button:not(.ui-button--icon):hover:not(:disabled), .ui-button--icon:hover:not(:disabled) { transform: none; box-shadow: none; } }