/* =========================================================
   SOL STAKING PAGE ADDITIONS (keeps your existing theme)
   ========================================================= */

/* Make reveal safe */
html:not(.js) .reveal { opacity: 1 !important; transform: none !important; }

.reveal { opacity: 0; transform: translateY(24px); }
.reveal.revealed {
  opacity: 1;
  transform: none;
  transition: opacity .65s ease, transform .65s ease;
  will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------------------------------------------------------
   SOL GLOBAL BACKGROUND
   --------------------------------------------------------- */
.sol-bg{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.sol-bg__svg{
  position: absolute;
  right: 6vw;
  top: 20vh;
  width: min(34vw, 440px);
  height: auto;
  transform: rotate(-14deg);
  opacity: 1;
}

.sol-bg__svg--glow{
  opacity: .14;
  filter:
    blur(12px)
    drop-shadow(0 0 18px rgba(4,255,196,.24))
    drop-shadow(0 0 56px rgba(4,255,196,.12));
  mix-blend-mode: screen;
  transform: rotate(-14deg) translate3d(-6px, 8px, 0);
}

.sol-bg__svg--sharp{
  opacity: .16;
  filter:
    contrast(1.06)
    brightness(1.08)
    drop-shadow(0 10px 42px rgba(0,0,0,.55));
}

.sol-bg__wash{
  position:absolute;
  inset:0;
  background:
    radial-gradient(780px 520px at 70% 50%, rgba(4,255,196,.10), transparent 60%),
    radial-gradient(760px 520px at 62% 58%, rgba(99,102,241,.08), transparent 62%);
  opacity: .9;
}

@media (max-width: 640px){
  .sol-bg__svg{
    right: -2vw;
    top: 10vh;
    width: min(76vw, 500px);
  }
  .sol-bg__svg--glow{ opacity:.12; }
  .sol-bg__svg--sharp{ opacity:.14; }
}

/* Keep content above the background */
header, section, footer { position: relative; z-index: 10; }

/* ---------------------------------------------------------
   Small UI components
   --------------------------------------------------------- */
.sol-chip{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 999px;
  padding: .45rem .70rem;
  font-size: .85rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  transition: .2s ease;
  color: rgba(226,232,240,.9);
  white-space: nowrap;
}
.sol-chip:hover{ border-color: rgba(4,255,196,.35); background: rgba(4,255,196,.06); }
.sol-chip.is-active{
  border-color: rgba(4,255,196,.55);
  background: rgba(4,255,196,.10);
  color: #fff;
}

.sol-pill{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: 999px;
  padding: .38rem .65rem;
  font-size: .85rem;
  transition: .2s ease;
}
.sol-pill:hover{ border-color: rgba(4,255,196,.35); background: rgba(4,255,196,.06); }
.sol-pill.is-active{
  border-color: rgba(4,255,196,.55);
  background: rgba(4,255,196,.10);
  color: #fff;
}

.sol-lock{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: 14px;
  padding: .60rem .70rem;
  font-size: .9rem;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  transition:.2s ease;
}
.sol-lock:hover{ border-color: rgba(4,255,196,.35); background: rgba(4,255,196,.06); }
.sol-lock.is-active{
  border-color: rgba(4,255,196,.60);
  background: rgba(4,255,196,.10);
  color: #fff;
}

/* ---------------------------------------------------------
   Charts
   --------------------------------------------------------- */
.sol-price-chart{
  position: relative;
  height: 220px;
}
@media (max-width: 640px){
  .sol-price-chart{ height: 190px; }
}

.stake-chart-wrap{
  position: relative;
  height: 340px;
}
@media (max-width: 640px){
  .stake-chart-wrap{ height: 280px; }
}

/* Tooltip bubble */
.stake-tooltip{
  position:absolute;
  z-index: 5;
  min-width: 160px;
  padding: .65rem .75rem;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(3, 8, 16, .80);
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  transform: translate(-50%, -110%);
  pointer-events: none;
}
.stake-tooltip strong{
  display:block;
  font-size: .95rem;
  color: #fff;
}
.stake-tooltip .muted{
  margin-top: .15rem;
  font-size: .82rem;
  color: rgba(148,163,184,.95);
}

/* Step icons */
.sol-step-ico{
  height: 46px;
  width: 46px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  background: rgba(4,255,196,.12);
  border: 1px solid rgba(4,255,196,.28);
}
.sol-step-ico i{
  font-size: 22px;
  color: rgba(4,255,196,.95);
}

/* HERO: soften big text + avoid overflow */
@media (max-width: 640px) {
  .title-glow {
    font-size: 2.15rem !important;
    line-height: 1.1 !important;
    word-break: break-word;
  }
}

/* Chips wrap and never overflow */
.sol-chip { max-width: 100%; flex: 0 1 auto; white-space: nowrap; }

@media (max-width: 640px) {
  [data-days], [data-calc-unit] {
    padding: .42rem .62rem;
    font-size: .82rem;
  }

  .flex.flex-wrap.items-center.gap-2,
  .flex.flex-wrap.items-center.gap-4 {
    gap: .5rem !important;
  }

  .mt-7.grid.sm\:grid-cols-3 { grid-template-columns: 1fr !important; }

  .sol-price-chart { height: 170px !important; }

  .sol-lock {
    padding: .55rem .65rem;
    font-size: .86rem;
    white-space: nowrap;
  }

  .mt-2.grid.grid-cols-3.gap-2 { grid-template-columns: 1fr 1fr !important; }
  .mt-2.grid.grid-cols-3.gap-2 .sol-lock[data-lock="3m"] { grid-column: 1 / -1; }

  .sol-pill { padding: .36rem .60rem; font-size: .82rem; }

  .lg\:col-span-2.glass.neon-border.rounded-2xl.p-6.reveal { padding: 1rem !important; }
  .glass.neon-border.rounded-2xl.p-6.reveal { padding: 1rem !important; }

  .stake-chart-wrap { height: 240px !important; overflow: hidden; }

  .stake-tooltip {
    min-width: 140px !important;
    max-width: 220px !important;
    padding: .55rem .65rem !important;
  }
}

canvas { max-width: 100% !important; }

@media (max-width: 640px) {
  .lock-grid { grid-template-columns: 1fr 1fr !important; }
  .lock-grid .sol-lock[data-lock="3m"] { grid-column: 1 / -1; }
}