:root {
  --stk-coin-left: -5.5rem;
  --stk-coin-w: 13.625rem;
  --stk-coin-bottom: 10rem;
  --stk-gap-tabs: clamp(2.5rem, calc(1.61765rem + 3.7647vw), 3.5rem);
  --stk-switch-pad: clamp(0.625rem, calc(0.07353rem + 2.3529vw), 1.25rem);
  --stk-btn-h: clamp(4.375rem, calc(4.18367rem + 0.8163vw), 5rem);
  --stk-body-pad-x: clamp(1.75rem, calc(-0.23529rem + 8.4706vw), 4rem);
  --stk-body-pad-y: clamp(2.5rem, calc(2.11735rem + 1.6327vw), 3.75rem);
  --stk-body-gap: clamp(1.875rem, calc(1.32353rem + 2.3529vw), 2.5rem);
  --fs-vote: var(--fs-small);
}

@media (min-width: 1280px) {
  :root {
  --stk-coin-left: clamp(-6.1875rem, calc(-2.75rem + -3.4375vw), -5.5rem);
  --stk-coin-w: clamp(13.625rem, calc(10.125rem + 4.375vw), 14.5rem);
  --stk-coin-bottom: clamp(5.625rem, calc(27.5rem + -21.875vw), 10rem);
  --stk-intro-offset: clamp(4.0625rem, calc(2.5625rem + 1.875vw), 4.4375rem);
  --stk-gap-tabs: 3.75rem;
  --stk-switch-pad: clamp(1.5rem, calc(0rem + 1.875vw), 1.875rem);
  --stk-body-gap: 1.875rem;
  --fs-vote: clamp(0.8125rem, calc(-0.1875rem + 1.25vw), 1.0625rem);
  }
}

.staking__card { --corner-color: var(--indigo); background: var(--beige-light); }

@media (min-width: 1280px) {
  .staking .section-intro { grid-column: 2 / span 3; }
}

.staking__coin {
  position: absolute;
  left: var(--stk-coin-left);
  bottom: var(--stk-coin-bottom);
  width: var(--stk-coin-w);
  height: auto;
  z-index: 0;
  pointer-events: none;
}

.staking.is-live .staking__coin {
  animation: coin-float 11s ease-in-out infinite;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .staking.is-live .staking__coin { animation: none; }
}

.tabs-wrap { grid-column: 6 / span 6; grid-row: 1; position: relative; }
.tabs {
  position: relative; z-index: 1;
  display: grid;
  grid-template-rows: auto 1fr;
  background: url('../assets/staking/tab-bg.webp') center / cover no-repeat;
  border-radius: var(--radius-card);
}

.tab-switch {
  background: var(--lavender);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}

.tab-switch__track {
  display: grid;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}

.tab-switch__btn {
  height: var(--stk-btn-h);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  color: var(--beige-light);
  opacity: .55;
  transition: transform var(--t) ease, background-color var(--t) ease, color var(--t) ease, opacity var(--t) ease;
}

.tab-switch__btn:hover { opacity: .85; }
.tab-switch__btn.is-active { background: var(--indigo); color: var(--text-white); opacity: 1; }

.tabs[data-active="ls"] .tab-switch__btn[data-tab="ls"] { transform: translateY(100%); }
.tabs[data-active="ls"] .tab-switch__btn[data-tab="ns"] { transform: translateY(-100%); }

.tab-body {
  grid-row: 2;
  grid-column: 1;
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  padding-block: var(--stk-body-pad-y);
  padding-inline: var(--stk-body-pad-x);
  transition: opacity var(--t) ease;
}
.tab-body[hidden] { visibility: hidden; opacity: 0; pointer-events: none; }

@media (min-width: 1280px) {
  .tab-body {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    padding-inline: 0;
    align-content: start;
  }
  .tab-body > * { grid-column: 2 / span 4; }
  .vote-acc__field { white-space: nowrap; overflow-wrap: normal; }
}

.subtabs-line { font-style: italic; }
.subtabs-line, .tab-body ol { padding-left: 1.6875rem; }

.tab-body ol li + li { margin-top: .5rem; }
.tab-body .btn--primary { margin-top: var(--stk-body-gap); }

.tab-body ol a { color: var(--accent-primary-2); font-weight: 700; font-style: italic; transition: color var(--t) ease; }
.tab-body ol a.pool--vault    { color: var(--lavender); }
.tab-body ol a.pool--solblaze { color: var(--indigo); }
.tab-body ol a:hover { color: var(--accent-primary-1); }
.tab-body .btn--primary { width: 100%; }

.vote-acc { display: flex; gap: .25rem; margin: .625rem 0 .875rem; }
.vote-acc__field {
  flex: 1 1 auto;
  background: var(--field-bg);
  border-radius: .625rem;
  padding: .625rem .875rem;
  font-weight: 700;
  font-style: italic;
  font-size: var(--fs-vote);
  line-height: 1.4;
  color: var(--indigo);
  text-align: center;
  overflow-wrap: anywhere;
}
.vote-acc__field:hover {  color: var(--lavender);  cursor: pointer; }

.vote-acc__copy {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 2rem;
  align-self: stretch;
  display: grid; place-items: center;
  background: var(--field-bg);
  border-radius: .625rem;
  color: var(--indigo);
  transition: opacity var(--t) ease, color var(--t) ease;
}

.vote-acc__copy svg { width: 1rem; height: 1rem; opacity: .7; transition: opacity var(--t) ease; }
.vote-acc__copy:hover svg,
.vote-acc__copy:active svg { opacity: 1; }
.vote-acc__copy:hover,
.vote-acc__copy:active { color: var(--lavender); }
.vote-acc__copy.is-copied { color: var(--accent-live); }
.vote-acc__copy.is-copied svg { opacity: 1; }
.vote-acc__field.is-copied { color: var(--accent-live); }

.subtabs-line {
  color: var(--indigo);
  margin-bottom: var(--gap-para);
}

.pool--jpool    { color: var(--accent-primary-2); }
.pool--vault    { color: var(--lavender); }
.pool--solblaze { color: var(--indigo); }

.copy-word {
  font: inherit;
  color: inherit;
  padding: 0;
  font-weight: 700;
  transition: color var(--t) ease;
}
.copy-word:hover { color: var(--accent-primary-2); }
.copy-word.is-copied { color: var(--accent-live); }

@media (max-width: 1279px) {
  .tabs-wrap { grid-row: 2; margin-top: var(--stk-gap-tabs); }
}

@media (max-width: 959px) {
  .staking__coin { display: none; }
}

@media (max-width: 799px) {
  .staking .section-intro,
  .tabs-wrap { grid-column: 2 / span 10; }

  .staking__coin { display: none; }
}

.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 1.25rem; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--indigo) 60%, transparent); backdrop-filter: blur(4px); }
.modal__card {
  position: relative;
  width: 31.25rem;
  padding: 5.625rem 3.125rem;
  max-width: 100%;
  background: var(--beige-light);
  color: var(--indigo);
  border-radius: var(--radius-card);
  box-shadow: 0 1.25rem 3.75rem color-mix(in srgb, var(--indigo) 35%, transparent);
}

.modal__close {
  position: absolute; top: 1.875rem; right: 1.875rem;
  width: 1.875rem; height: 1.875rem;
  display: grid; place-items: center;
  color: var(--lavender);
  transition: color var(--t) ease;
}
.modal__close svg { width: 1.875rem; height: 1.875rem; }
.modal__close:hover { color: var(--indigo); }
.modal__lead { margin-top: .5rem; }

.wallet-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .625rem;
  margin-top: 2.5rem;
}
.wallet-btn {
  display: flex; align-items: center; gap: 1rem;
  height: 4.375rem;
  padding-inline: 1rem;
  border-radius: var(--radius-btn);
  background: var(--field-bg);
  font-weight: 600; font-size: var(--fs-body);
  color: var(--indigo);
  transition: background-color var(--t) ease;
}
.wallet-btn:hover { background: color-mix(in srgb, var(--lavender) 33%, transparent); }

.wallet-btn__icon {
  flex: 0 0 auto;
  width: 3.125rem; height: 3.125rem;
  border-radius: .5rem;
  object-fit: contain;
}

.wallet-btn__name { white-space: nowrap; }
.modal__foot { margin-top: 2.25rem; font-size: var(--fs-small); }
.modal__foot a { font-weight: 700; transition: color var(--t) ease; }
.modal__foot a:hover { color: var(--accent-primary-1); }
.wallet-conn__name { margin-top: 1.5rem; font-weight: 700; }
.wallet-conn__addr {
  margin-top: .5rem;
  padding: .625rem .875rem;
  border-radius: .625rem;
  background: var(--field-bg);
  font-style: italic;
  font-size: var(--fs-small);
  overflow-wrap: anywhere;
}
#walletDisconnect { width: 100%; margin-top: 2.25rem; }

.modal__status { min-height: 1.5em; margin-top: 1rem; font-size: var(--fs-small); color: var(--text-violet); }
.modal__status:empty { display: none; }
.modal__status.is-ok { color: var(--indigo); font-weight: 800; }

@media (max-width: 600px) {
  .modal__card {   width: 80%;   max-width: 31.25rem; padding: 4.375rem 1.875rem 3.125rem; }
  .wallet-list { grid-template-columns: 1fr; }
}