/* Rise Ledger canonical button system.
   Screenshot-based compact premium CTA family. */
:root {
  --btn-radius: 6px;
  --btn-height-sm: 32px;
  --btn-height-md: 42px;
  --btn-height-lg: 44px;
  --btn-height-xl: 46px;
  --btn-pad-x-sm: .72rem;
  --btn-pad-x-md: 1.15rem;
  --btn-pad-x-lg: 1.35rem;
  --btn-gap: .48rem;
  --btn-font-size-sm: .68rem;
  --btn-font-size-md: .76rem;
  --btn-font-size-lg: .78rem;
  --btn-weight: 800;
  --btn-tracking: .055em;

  --btn-primary-fill: #ffc15a;
  --btn-primary-fill-strong: #f8a82a;
  --btn-primary-fill-hover: #ffc86b;
  --btn-primary-text: #211500;
  --btn-primary-border: rgba(255, 214, 137, .24);
  --btn-primary-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 8px 18px rgba(248,168,42,.16);
  --btn-primary-shadow-hover:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 10px 22px rgba(248,168,42,.22);

  --btn-dark-text: #e4eafc;
  --btn-dark-text-muted: #b8c5e6;
  --btn-dark-surface: #111a2d;
  --btn-dark-surface-strong: #172137;
  --btn-dark-surface-hover: #1a2540;
  --btn-dark-border: rgba(188,201,235,.14);
  --btn-dark-border-hover: rgba(211,222,255,.24);
  --btn-dark-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 8px 18px rgba(3,8,22,.22);
  --btn-dark-shadow-hover:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 10px 22px rgba(3,8,22,.3);

  --btn-focus-ring: rgba(255,193,116,.48);
  --btn-selected-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 0 0 1px rgba(255,214,137,.18),
    0 10px 22px rgba(248,168,42,.2);
}

.btn,
.btn-tab,
.btn-segment,
.btn-nav,
.btn-quick,
.btn-icon,
.btn-inline {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  min-height: var(--btn-height-md);
  padding: .54rem var(--btn-pad-x-md);
  border: 1px solid var(--btn-dark-border);
  border-radius: var(--btn-radius);
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0)),
    linear-gradient(135deg, var(--btn-dark-surface), var(--btn-dark-surface-strong));
  box-shadow: var(--btn-dark-shadow);
  color: var(--btn-dark-text);
  font-family: var(--rl-font-sans);
  font-size: var(--btn-font-size-md);
  font-weight: var(--btn-weight);
  letter-spacing: var(--btn-tracking);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  transition:
    transform var(--rl-duration-fast) var(--rl-ease),
    color var(--rl-duration-base) var(--rl-ease),
    border-color var(--rl-duration-base) var(--rl-ease),
    background var(--rl-duration-base) var(--rl-ease),
    box-shadow var(--rl-duration-base) var(--rl-ease),
    opacity var(--rl-duration-base) var(--rl-ease),
    filter var(--rl-duration-base) var(--rl-ease);
}

.btn::after,
.btn-tab::after,
.btn-segment::after,
.btn-nav::after,
.btn-quick::after,
.btn-icon::after,
.btn-inline::after {
  content: "";
  position: absolute;
  inset: -55% -80%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 42%, rgba(255,255,255,.22), transparent 58%);
  opacity: 0;
  transform: translateX(-38%) rotate(10deg);
  transition: opacity var(--rl-duration-slow) var(--rl-ease), transform 720ms var(--rl-ease);
}

.btn:hover:not(:disabled),
.btn:focus-visible,
.btn-tab:hover:not(:disabled),
.btn-tab:focus-visible,
.btn-segment:hover:not(:disabled),
.btn-segment:focus-visible,
.btn-nav:hover:not(:disabled),
.btn-nav:focus-visible,
.btn-quick:hover:not(:disabled),
.btn-quick:focus-visible,
.btn-icon:hover:not(:disabled),
.btn-icon:focus-visible,
.btn-inline:hover:not(:disabled),
.btn-inline:focus-visible {
  transform: translateY(-1px);
}

.btn:hover::after,
.btn:focus-visible::after,
.btn-tab:hover::after,
.btn-tab:focus-visible::after,
.btn-segment:hover::after,
.btn-segment:focus-visible::after,
.btn-nav:hover::after,
.btn-nav:focus-visible::after,
.btn-quick:hover::after,
.btn-quick:focus-visible::after,
.btn-icon:hover::after,
.btn-icon:focus-visible::after,
.btn-inline:hover::after,
.btn-inline:focus-visible::after,
.btn-pressed::after {
  opacity: .42;
  transform: translateX(38%) rotate(10deg);
}

.btn:active:not(:disabled),
.btn-tab:active:not(:disabled),
.btn-segment:active:not(:disabled),
.btn-nav:active:not(:disabled),
.btn-quick:active:not(:disabled),
.btn-icon:active:not(:disabled),
.btn-inline:active:not(:disabled),
.btn-pressed {
  transform: translateY(0) scale(.99);
}

.btn:focus-visible,
.btn-tab:focus-visible,
.btn-segment:focus-visible,
.btn-nav:focus-visible,
.btn-quick:focus-visible,
.btn-icon:focus-visible,
.btn-inline:focus-visible {
  outline: 2px solid var(--btn-focus-ring);
  outline-offset: 2px;
}

.btn:disabled,
.btn[aria-busy="true"],
.btn-tab:disabled,
.btn-tab[aria-busy="true"],
.btn-segment:disabled,
.btn-segment[aria-busy="true"],
.btn-nav:disabled,
.btn-nav[aria-busy="true"],
.btn-quick:disabled,
.btn-quick[aria-busy="true"],
.btn-icon:disabled,
.btn-icon[aria-busy="true"],
.btn-inline:disabled,
.btn-inline[aria-busy="true"] {
  cursor: not-allowed;
  opacity: .58;
  transform: none !important;
  filter: none !important;
}

.btn-loading,
.btn.btn-loading,
.btn[aria-busy="true"] {
  color: var(--rl-text-muted) !important;
  border-color: rgba(188,201,235,.13) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0)),
    linear-gradient(135deg, rgba(32,43,65,.94), rgba(22,31,49,.96)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
  cursor: wait !important;
  pointer-events: none;
}
.btn-loading::after,
.btn.btn-loading::after,
.btn[aria-busy="true"]::after { opacity: 0 !important; }

.btn-primary {
  color: var(--btn-primary-text);
  border-color: var(--btn-primary-border);
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 48%),
    linear-gradient(135deg, var(--btn-primary-fill), var(--btn-primary-fill-strong));
  box-shadow: var(--btn-primary-shadow);
}
.btn-primary:hover:not(:disabled),
.btn-primary:focus-visible {
  color: var(--btn-primary-text);
  border-color: rgba(255,225,166,.34);
  background:
    linear-gradient(180deg, rgba(255,255,255,.25), rgba(255,255,255,0) 48%),
    linear-gradient(135deg, var(--btn-primary-fill-hover), var(--btn-primary-fill-strong));
  box-shadow: var(--btn-primary-shadow-hover);
  filter: brightness(1.015) saturate(1.02);
}

.btn-secondary {
  color: var(--btn-dark-text);
  border-color: var(--btn-dark-border);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)),
    linear-gradient(135deg, var(--btn-dark-surface), var(--btn-dark-surface-strong));
  box-shadow: var(--btn-dark-shadow);
}
.btn-secondary:hover:not(:disabled),
.btn-secondary:focus-visible {
  color: #f0f4ff;
  border-color: var(--btn-dark-border-hover);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)),
    linear-gradient(135deg, #14203a, var(--btn-dark-surface-hover));
  box-shadow: var(--btn-dark-shadow-hover);
}

.btn-outline {
  color: var(--btn-dark-text);
  border-color: rgba(188,201,235,.18);
  background:
    linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,0)),
    rgba(17,26,45,.58);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.btn-outline:hover:not(:disabled),
.btn-outline:focus-visible {
  color: #f0f4ff;
  border-color: var(--btn-dark-border-hover);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)),
    rgba(23,33,55,.8);
  box-shadow: var(--btn-dark-shadow);
}

.btn-ghost {
  color: var(--btn-dark-text-muted);
  border-color: rgba(188,201,235,.1);
  background:
    linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,0)),
    rgba(17,26,45,.38);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.btn-ghost:hover:not(:disabled),
.btn-ghost:focus-visible {
  color: var(--btn-dark-text);
  border-color: var(--btn-dark-border-hover);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)),
    linear-gradient(135deg, var(--btn-dark-surface), var(--btn-dark-surface-strong));
  box-shadow: var(--btn-dark-shadow);
}

.btn-danger {
  --btn-semantic: var(--rl-red);
  color: #ff8b96;
  border-color: rgba(243,67,81,.34);
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0)),
    linear-gradient(135deg, rgba(92,22,34,.72), rgba(49,18,31,.86));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 8px 18px rgba(243,67,81,.1);
}
.btn-danger:hover:not(:disabled),
.btn-danger:focus-visible {
  color: #ffc0c7;
  border-color: rgba(243,67,81,.54);
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0)),
    linear-gradient(135deg, rgba(115,26,42,.78), rgba(62,19,34,.9));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 10px 22px rgba(243,67,81,.14);
}

.btn-sm {
  min-height: var(--btn-height-sm);
  padding: .42rem var(--btn-pad-x-sm);
  font-size: var(--btn-font-size-sm);
}
.btn-md { min-height: var(--btn-height-md); }
.btn-lg {
  min-height: var(--btn-height-lg);
  padding-inline: var(--btn-pad-x-lg);
  font-size: var(--btn-font-size-lg);
}
.btn-xl {
  min-height: var(--btn-height-xl);
  padding-inline: var(--btn-pad-x-lg);
  font-size: var(--btn-font-size-lg);
}
.btn-full { width: 100%; }

.btn-icon {
  width: var(--btn-height-md);
  min-width: var(--btn-height-md);
  padding: 0;
  color: var(--btn-dark-text-muted);
}
.btn-icon.btn-sm {
  width: var(--btn-height-sm);
  min-width: var(--btn-height-sm);
  padding: 0;
}

.btn-inline {
  min-height: var(--btn-height-sm);
  padding: .34rem .54rem;
  color: var(--btn-dark-text-muted);
  border-color: rgba(188,201,235,.08);
  background: rgba(17,26,45,.28);
  box-shadow: none;
}
.btn-inline:hover:not(:disabled),
.btn-inline:focus-visible {
  color: var(--btn-dark-text);
  border-color: rgba(188,201,235,.18);
  background: rgba(23,33,55,.62);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.btn-tab,
.btn-segment {
  color: var(--btn-dark-text-muted);
  border-color: rgba(188,201,235,.1);
  background:
    linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,0)),
    rgba(17,26,45,.38);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.btn-tab:hover:not(:disabled),
.btn-segment:hover:not(:disabled) {
  color: var(--btn-dark-text);
  border-color: var(--btn-dark-border-hover);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)),
    linear-gradient(135deg, var(--btn-dark-surface), var(--btn-dark-surface-strong));
  box-shadow: var(--btn-dark-shadow);
}
.btn-tab.active,
.btn-tab.is-active,
.btn-tab[aria-selected="true"],
.btn-segment.active,
.btn-segment.is-active,
.btn-segment[aria-pressed="true"] {
  color: var(--btn-primary-text);
  border-color: var(--btn-primary-border);
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 48%),
    linear-gradient(135deg, var(--btn-primary-fill), var(--btn-primary-fill-strong));
  box-shadow: var(--btn-primary-shadow);
}
.btn-tab.active:hover,
.btn-tab.is-active:hover,
.btn-tab[aria-selected="true"]:hover,
.btn-segment.active:hover,
.btn-segment.is-active:hover,
.btn-segment[aria-pressed="true"]:hover {
  color: var(--btn-primary-text);
  border-color: rgba(255,225,166,.34);
  background:
    linear-gradient(180deg, rgba(255,255,255,.25), rgba(255,255,255,0) 48%),
    linear-gradient(135deg, var(--btn-primary-fill-hover), var(--btn-primary-fill-strong));
  box-shadow: var(--btn-selected-shadow);
  filter: brightness(1.01) saturate(1.02);
}

.btn-nav {
  width: 100%;
  justify-content: flex-start;
  min-height: 42px;
  padding: .58rem .8rem;
  color: var(--btn-dark-text-muted);
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
}
.btn-nav:hover:not(:disabled),
.btn-nav:focus-visible {
  color: var(--btn-dark-text);
  border-color: var(--btn-dark-border-hover);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)),
    linear-gradient(135deg, var(--btn-dark-surface), var(--btn-dark-surface-strong));
  box-shadow: var(--btn-dark-shadow);
}
.btn-nav.active,
.btn-nav[aria-current="page"] {
  color: var(--btn-dark-text);
  border-color: rgba(255,193,116,.18);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)),
    linear-gradient(135deg, #141f37, #1a2540);
  box-shadow: var(--btn-dark-shadow);
}
.btn-nav.active:hover,
.btn-nav[aria-current="page"]:hover {
  border-color: rgba(255,193,116,.28);
  box-shadow:
    var(--btn-dark-shadow-hover),
    0 0 0 1px rgba(255,193,116,.08);
}
.btn-nav.active::before,
.btn-nav[aria-current="page"]::before {
  content: '';
  position: absolute;
  left: 0;
  top: .35rem;
  bottom: .35rem;
  width: 3px;
  border-radius: var(--btn-radius);
  background: var(--rl-green);
  box-shadow: 0 0 12px rgba(124,240,100,.42);
}

.btn-quick {
  --btn-quick-accent: var(--rl-gold);
  --btn-quick-accent-rgb: 255,193,116;
  min-height: 106px;
  flex-direction: column;
  gap: .68rem;
  padding: .88rem .7rem;
  color: var(--btn-dark-text);
  border-color: rgba(188,201,235,.1);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)),
    linear-gradient(135deg, var(--btn-dark-surface), var(--btn-dark-surface-strong));
  box-shadow: var(--btn-dark-shadow);
  line-height: 1.25;
}
.btn-quick::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 0%, rgba(var(--btn-quick-accent-rgb), .12), transparent 46%),
    linear-gradient(135deg, rgba(var(--btn-quick-accent-rgb), .06), transparent 50%);
  opacity: .56;
  transition: opacity var(--rl-duration-base) var(--rl-ease), transform var(--rl-duration-base) var(--rl-ease);
}
.btn-quick:hover:not(:disabled),
.btn-quick:focus-visible {
  color: #f0f4ff;
  border-color: rgba(var(--btn-quick-accent-rgb), .3);
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,0)),
    linear-gradient(135deg, #14203a, var(--btn-dark-surface-hover));
  box-shadow:
    var(--btn-dark-shadow-hover),
    0 0 18px rgba(var(--btn-quick-accent-rgb), .08);
}
.btn-quick:hover::before,
.btn-quick:focus-visible::before {
  opacity: .82;
  transform: scale(1.02);
}
.btn-quick .icon {
  width: 42px;
  height: 42px;
  color: var(--btn-quick-accent);
  border: 1px solid rgba(var(--btn-quick-accent-rgb), .22);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 0%, rgba(var(--btn-quick-accent-rgb), .18), transparent 62%),
    rgba(var(--btn-quick-accent-rgb), .07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
  font-size: 22px;
}
.btn-quick.active-session,
.btn-quick.is-active {
  border-color: rgba(var(--btn-quick-accent-rgb), .34);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0)),
    linear-gradient(135deg, #15213b, #1b2744);
  animation: btnPulseBorder 2s ease-in-out infinite;
}
.btn-quick.active-session:hover,
.btn-quick.is-active:hover {
  animation: none;
  border-color: rgba(var(--btn-quick-accent-rgb), .44);
  box-shadow:
    var(--btn-dark-shadow-hover),
    0 0 20px rgba(var(--btn-quick-accent-rgb), .12);
  filter: brightness(1.015) saturate(1.02);
}

.btn-accent-brand {
  --btn-quick-accent: var(--rl-gold);
  --btn-quick-accent-rgb: 255,193,116;
}
.btn-accent-success {
  --btn-quick-accent: var(--rl-green);
  --btn-quick-accent-rgb: 124,240,100;
}
.btn-accent-danger {
  --btn-quick-accent: var(--rl-red);
  --btn-quick-accent-rgb: 243,67,81;
}
.btn-accent-info {
  --btn-quick-accent: var(--rl-blue);
  --btn-quick-accent-rgb: 115,185,243;
}

.spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid rgba(255,193,116,.24);
  border-top-color: currentColor;
  border-radius: 999px;
  animation: buttonSpin .75s linear infinite;
}
@keyframes buttonSpin { to { transform: rotate(360deg); } }
@keyframes btnPulseBorder {
  0%,100% { box-shadow: 0 0 0 0 rgba(124,240,100,.24); }
  50% { box-shadow: 0 0 0 4px rgba(124,240,100,0); }
}

@media (hover: none) and (pointer: coarse) {
  .btn:hover,
  .btn-tab:hover,
  .btn-segment:hover,
  .btn-nav:hover,
  .btn-quick:hover,
  .btn-icon:hover,
  .btn-inline:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn::after,
  .btn-tab,
  .btn-tab::after,
  .btn-segment,
  .btn-segment::after,
  .btn-nav,
  .btn-nav::after,
  .btn-quick,
  .btn-quick::after,
  .btn-quick::before,
  .btn-icon,
  .btn-icon::after,
  .btn-inline,
  .btn-inline::after,
  .spinner {
    animation: none !important;
    transition: none !important;
  }
}