/* === ST Cards v1.4.0 — same design, PC 5 in one row, Upload ribbon === */
:root{
  --stk-radius: 20px;
  --stk-pad: 16px;
  --stk-shadow: 0 12px 28px rgba(0,0,0,.18);
  --stk-shadow-hover: 0 18px 36px rgba(0,0,0,.24);
  --stk-card: #15151a;
  --stk-text: #e9e9ef;
  --stk-sub: #9aa0a6;
  --stk-border: #2a2a30;
  --stk-approve-2:#34d399; --stk-pending-2:#fbbf24; --stk-reject-2:#fb7185; --stk-upload-2:#60a5fa; --stk-wallet-2:#a78bfa;
}
.stk-wrap{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width: 1024px){
  .stk-wrap{ grid-template-columns: 0.84fr repeat(4, 1fr); } /* first narrower to fit one row */
}
.stk-link{ text-decoration:none; color:inherit; display:block; }
.stk-card{ position:relative; overflow:hidden; border-radius:var(--stk-radius);
  background:var(--stk-card); border:1px solid var(--stk-border); box-shadow:var(--stk-shadow);
  transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease; isolation:isolate;
}
.stk-card:hover{ transform: translateY(-3px); box-shadow: var(--stk-shadow-hover); border-color: rgba(255,255,255,.12); }
.stk-topbar{ height:8px; background:linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,0)); }
.stk-approved .stk-topbar{ background: linear-gradient(90deg, var(--stk-approve-2), transparent); }
.stk-pending  .stk-topbar{ background: linear-gradient(90deg, var(--stk-pending-2), transparent); }
.stk-rejected .stk-topbar{ background: linear-gradient(90deg, var(--stk-reject-2),  transparent); }
.stk-upload  .stk-topbar{ background: linear-gradient(90deg, var(--stk-upload-2),  transparent); }
.stk-wallet  .stk-topbar{ background: linear-gradient(90deg, var(--stk-wallet-2),  transparent); }

.stk-glow{ content:""; position:absolute; inset:-30% -10% auto -10%; height:140px; filter: blur(40px); opacity:.35; z-index:0; }
.stk-approved .stk-glow{ background: radial-gradient(60% 60% at 20% 50%, var(--stk-approve-2), transparent); }
.stk-pending  .stk-glow{ background: radial-gradient(60% 60% at 20% 50%, var(--stk-pending-2), transparent); }
.stk-rejected .stk-glow{ background: radial-gradient(60% 60% at 20% 50%, var(--stk-reject-2),  transparent); }
.stk-upload  .stk-glow{ background: radial-gradient(60% 60% at 20% 50%, var(--stk-upload-2),  transparent); }
.stk-wallet  .stk-glow{ background: radial-gradient(60% 60% at 20% 50%, var(--stk-wallet-2),  transparent); }

.stk-body{ position:relative; display:flex; justify-content:space-between; align-items:center; padding:14px 14px 12px; z-index:1; color:var(--stk-text); }
.stk-left{ display:flex; flex-direction:column; gap:8px; }
.stk-kicker{ font-size:12px; letter-spacing:.4px; text-transform:uppercase; color:var(--stk-sub); }
.stk-value{ font-weight:800; line-height:1; font-size: clamp(20px, 2.4vw, 34px); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Upload CTA smaller to fit */
.stk-upload .stk-upload-title{ font-size: clamp(20px, 2.6vw, 32px); }
.stk-cta{ display:inline-flex; align-items:center; gap:10px; padding:7px 12px; border-radius:999px;
  background: linear-gradient(90deg, var(--stk-upload-2), rgba(96,165,250,.2)); border:1px solid rgba(96,165,250,.5);
  font-weight:800; letter-spacing:.3px; box-shadow:0 4px 12px rgba(96,165,250,.25); user-select:none; }
.stk-cta .stk-arrow{ display:inline-block; font-style:normal; font-weight:900; transform: translateY(-1px); }

/* Wallet unique */
.stk-wallet .stk-value.stk-wallet-amount{ font-size: clamp(22px, 2.6vw, 34px); }
.stk-wallet .stk-badge{ display:inline-block; font-size:11px; font-weight:800; letter-spacing:.4px; color:#140e1f;
  background: linear-gradient(90deg, rgba(167,139,250,.95), rgba(167,139,250,.6));
  border:1px solid rgba(167,139,250,.55); border-radius:999px; padding:4px 10px; }

/* Right blob compact */
.stk-right{ position:relative; width:68px; height:68px; margin-left:12px; flex:0 0 68px; }
.stk-blob{ position:absolute; right:0; bottom:0; width:68px; height:68px; border-radius:50%;
  background: radial-gradient(60% 60% at 40% 40%, rgba(255,255,255,.14), rgba(255,255,255,0));
  border:1px solid rgba(255,255,255,.06); box-shadow: inset 0 0 40px rgba(255,255,255,.08); }
.stk-blob-pulse{ animation: stkPulse 2s ease-in-out infinite; }
@keyframes stkPulse{ 0%{transform:scale(1);opacity:.9;} 50%{transform:scale(1.08);opacity:1;} 100%{transform:scale(1);opacity:.9;} }

/* Spark bars (non-wallet) tighter */
.stk-spark{ display:flex; align-items:flex-end; gap:6px; height:22px; margin-top:2px; }
.stk-spark i{ display:block; width:10px; background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.08)); border-radius:10px; }
.stk-spark i:nth-child(1){ height:12px; } .stk-spark i:nth-child(2){ height:18px; } .stk-spark i:nth-child(3){ height:22px; } .stk-spark i:nth-child(4){ height:16px; } .stk-spark i:nth-child(5){ height:14px; }

/* Upload ribbon present */
.stk-ribbon{ position:absolute; top:10px; right:-34px; transform: rotate(35deg); z-index:3; pointer-events:none; }
.stk-ribbon span{ display:inline-block; padding:4px 18px; font-size:11px; font-weight:800; letter-spacing:.4px;
  background: linear-gradient(90deg, rgba(96,165,250,.95), rgba(96,165,250,.6)); color:#0b1220; border:1px solid rgba(96,165,250,.55); border-radius:999px; }

/* Variant topbars preserved */
.stk-approved .stk-topbar{ background: linear-gradient(90deg, var(--stk-approve-2), transparent); }
.stk-pending  .stk-topbar{ background: linear-gradient(90deg, var(--stk-pending-2), transparent); }
.stk-rejected .stk-topbar{ background: linear-gradient(90deg, var(--stk-reject-2), transparent); }


/* === v1.4.1: Wallet overflow fix on desktop === */


@media (min-width: 1024px){
  
  /* give wallet a bit more room by shrinking its blob */
  .stk-wallet .stk-right{ width:60px; height:60px; flex:0 0 60px; }
  .stk-wallet .stk-blob{ width:60px; height:60px; }
}

/* Safety: if any number is still too long, allow it to shrink via scale */
.stk-wallet .stk-value{
  transform-origin: left center;
}


/* === v1.4.2: Wallet auto-fit improvements === */


/* === v1.4.3: Wallet amount always fully visible (no ellipsis), auto-fit via JS === */
.stk-wallet .stk-wallet-amount{
  max-width: calc(100% - 60px); /* space for blob */
  display:block;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  will-change: transform, font-size;
}

/* === v1.4.4: Equal height for all cards, adjust ribbon position === */
.stk-upload .stk-body{
  min-height: auto;
}
.stk-card .stk-body{
  min-height: 100px; /* unify card height */
}

/* Ribbon fix: position fully on card, not cut */
.stk-ribbon{
  top: 12px;
  right: -26px;
  transform: rotate(35deg);
}


/* === v1.4.4: Equal heights for all cards + Upload ribbon position fix === */

/* Make cards flex containers so inner body stretches to same height */
.stk-card{ display:flex; flex-direction:column; }
.stk-body{ flex:1 1 auto; display:flex; justify-content:space-between; align-items:center; }

/* Uniform min-height so Upload = others */
.stk-card{ min-height: 132px; }
@media (min-width: 1200px){
  .stk-card{ min-height: 136px; }
}

/* Upload title size same as other values to keep height consistent */
.stk-upload .stk-upload-title{ font-size: clamp(20px, 2.4vw, 34px); }

/* Keep CTA compact but not shrinking overall height unexpectedly */
.stk-upload .stk-cta{ margin-top: 2px; }

/* Ribbon alignment: bring it inside a bit so it doesn't go off-side */
.stk-ribbon{ top: 10px; right: -20px; transform: rotate(35deg); z-index: 5; }
@media (max-width: 480px){
  .stk-ribbon{ right: -26px; } /* tiny screens */
}
@media (min-width: 1200px){
  .stk-ribbon{ right: -16px; } /* wide screens: pull in slightly */
}


/* === v1.4.5: Force perfectly equal heights for all cards === */

/* Make card heights uniform by flexbox stretch */
.stk-wrap{ align-items: stretch; }
.stk-card{ display:flex; flex-direction:column; height:100%; }
.stk-body{ flex:1 1 auto; display:flex; flex-direction:row; justify-content:space-between; align-items:center; }

/* Force same min-height for all */
.stk-card{ min-height: 150px; }
@media (min-width: 1200px){
  .stk-card{ min-height: 150px; }
}

/* Upload CTA no extra margin affecting height */
.stk-upload .stk-cta{ margin-top: 0; }


/* === v1.4.5: Perfect equal heights on desktop === */
@media (min-width: 1024px){
  :root{ --stk-card-h: 150px; } /* adjust if you want taller/shorter */
  .stk-card{
    height: var(--stk-card-h);
  }
  .stk-body{
    min-height: calc(var(--stk-card-h) - 12px); /* leave head strip + padding */
  }
  /* Ensure right blob same size for all */
  .stk-right{ width:68px; height:68px; flex:0 0 68px; }
  .stk-upload .stk-right{ width:68px; height:68px; }
}
/* Normalize internal gaps so Upload doesn't look tighter */
.stk-left{ gap:8px; }
.stk-upload .stk-cta{ margin-top: 2px; }

/* Safety: prevent accidental extra margins from spark/other elements */
.stk-spark{ margin-bottom: 0 !important; }