:root {

  /* =====================================================
     THEME PALETTE TOKENS
     Change these for new themes
  ===================================================== */

  /* BASE BACKGROUNDS */

  --sbic-bg-main: #020405;
  --sbic-bg-soft: #060b10;

  /* BRAND COLORS */

  --sbic-accent-main: #2cff5c;
  --sbic-accent-blue: #0a66ff;

  --sbic-accent-warn: #ffc107;
  --sbic-accent-danger: #ff6b6b;

  --sbic-accent-bg-soft: rgba(44,255,92,0.22);

  /* TEXT COLORS */

  --sbic-text-primary: #ffffff;
  --sbic-text-muted: #c1d0df;
  --sbic-text-soft: #9ab2c8;
  --sbic-text-placeholder: #86a3bb;
  --sbic-text-dark: #020b08;

  /* SURFACE COLORS */

  --sbic-surface-1: rgba(34,72,118,0.52);
  --sbic-surface-2: rgba(12,28,52,0.8);

  /* RADIAL LIGHTS */

  --sbic-radial-blue: radial-gradient(
    circle at 70% 38%,
    rgba(10,102,255,0.95) 0%,
    rgba(5,41,79,0.85) 42%,
    transparent 72%
  );

  --sbic-radial-green: radial-gradient(
    circle at 88% 65%,
    rgba(44,255,92,0.95) 0%,
    rgba(11,59,29,0.8) 46%,
    transparent 74%
  );

  /* GLASS COLORS */

  --sbic-glass-bg: linear-gradient(
    145deg,
    rgba(20,40,65,0.72),
    rgba(8,20,36,0.9)
  );

  --sbic-glass-bg-alt: linear-gradient(
    145deg,
    rgba(32,78,120,0.6),
    rgba(12,30,55,0.88)
  );

  --sbic-glass-bg-dark: linear-gradient(
    145deg,
    rgba(8,22,38,0.92),
    rgba(3,10,20,0.98)
  );

  /* BORDERS AND GLOWS */

  --sbic-border-soft: rgba(44,255,92,0.32);
  --sbic-border-strong: rgba(44,255,92,0.65);
  --sbic-border-muted: rgba(255,255,255,0.18);

  --sbic-accent-soft: rgba(44,255,92,0.28);

  --sbic-glow-soft: 0 0 18px rgba(44,255,92,0.3);
  --sbic-glow-main: 0 0 36px rgba(44,255,92,0.55);
  --sbic-glow-blue: 0 0 40px rgba(10,102,255,0.45);
  --sbic-glow-icon: 0 0 12px rgba(44,255,92,0.55);

  /* GRADIENT HELPERS */

  --sbic-gradient-main: linear-gradient(
    135deg,
    var(--sbic-accent-main),
    #9cff00
  );

  --sbic-gradient-blue: linear-gradient(
    135deg,
    var(--sbic-accent-blue),
    #00c6ff
  );

  /* INPUT COLOR */

  --sbic-input-bg: rgba(10,22,40,0.85);

  /* STATUS COLORS */

  --sbic-warning: var(--sbic-accent-warn);
  --sbic-danger: var(--sbic-accent-danger);


  /* =====================================================
     CORE SYSTEM TOKENS
     Do not change per theme
  ===================================================== */

  /* RADIUS SCALE */

  --sbic-radius-sm: 10px;
  --sbic-radius-md: 14px;
  --sbic-radius-lg: 18px;
  --sbic-radius-xl: 22px;
  --sbic-radius-pill: 999px;

  /* SPACING */

  --sbic-space-1: 4px;
  --sbic-space-2: 8px;
  --sbic-space-3: 12px;
  --sbic-space-4: 16px;
  --sbic-space-5: 24px;
  --sbic-space-6: 36px;

  /* MOTION */

  --sbic-transition-fast: 0.15s ease;
  --sbic-transition-base: 0.25s ease;
  --sbic-transition-slow: 0.45s cubic-bezier(.2,.8,.2,1);

  /* GLASS EFFECT SCALE */

  --sbic-glass-blur-sm: blur(10px) saturate(135%);
  --sbic-glass-blur-md: blur(16px) saturate(150%);
  --sbic-glass-blur-lg: blur(22px) saturate(165%);
  --sbic-glass-blur-xl: blur(28px) saturate(180%);

  /* SHADOW SYSTEM */

  --sbic-shadow-md: 0 14px 34px rgba(0,0,0,0.65);
  --sbic-shadow-lg: 0 22px 56px rgba(0,0,0,0.8);
  --sbic-shadow-xl: 0 34px 90px rgba(0,0,0,0.9);

  --sbic-shadow-card: 0 26px 70px rgba(0,0,0,0.85);
  --sbic-shadow-inset-soft: inset 0 0 18px rgba(10,102,255,0.28);

}







/* ================= SBIC LOGIN CARD THEME ================= */

.sbic-login-card {
  width: min(92vw, 460px);

  background: var(--sbic-glass-bg);
  backdrop-filter: var(--sbic-glass-blur-xl);
  -webkit-backdrop-filter: var(--sbic-glass-blur-xl);

  border-radius: var(--sbic-radius-xl);
  border: 1px solid var(--sbic-border-soft);

  box-shadow:
    var(--sbic-shadow-xl),
    inset 0 0 30px rgba(13,110,253,0.2),
    var(--sbic-glow-soft);
}

/* Body spacing */

.sbic-login-body {
  padding: 42px 46px;
  text-align: center;
}

/* Headline */

.sbic-login-card h3 {
  font-weight: 800;
  letter-spacing: 0.4px;
  color: var(--sbic-text-primary);
}

/* Text */

.sbic-login-card .text-muted {
  color: var(--sbic-text-muted);
  font-size: 14px;
}

/* ================= BUTTONS ================= */

.sbic-btn-primary {
  margin-top: 20px;

  background: linear-gradient(
    135deg,
    var(--sbic-accent-main),
    var(--sbic-accent-blue)
  );

  border: none;
  color: #000;

  padding: 12px;
  font-weight: 700;
  border-radius: var(--sbic-radius-sm);

  transition: 0.25s ease;
}

.sbic-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--sbic-glow-main);
}

/* Divider */

.sbic-divider {
  border: none;
  height: 1px;
  margin: 26px 0;

  background: linear-gradient(
    to right,
    transparent,
    var(--sbic-border-strong),
    transparent
  );
}

/* Secondary */

.sbic-btn-secondary {
  background: linear-gradient(
    135deg,
    var(--sbic-accent-warn),
    #ff9800
  );

  border: none;

  padding: 12px;
  border-radius: var(--sbic-radius-sm);
  font-weight: 700;

  transition: 0.25s ease;
}

.sbic-btn-secondary:hover {
  box-shadow: 0 0 28px rgba(255,193,7,0.75);
}

/* ================= SBIC LOGO ================= */

.sbic-logo {
  width: 120px;
  max-width: 60%;
  margin: 0 auto 18px;
  display: block;

  filter: drop-shadow(var(--sbic-glow-soft));

  animation: logoFloat 6s ease-in-out infinite;
}

/* ================= MOBILE ================= */

@media (max-width: 480px) {

  .sbic-login-body {
    padding: 30px 24px;
  }

  .sbic-login-card h3 {
    font-size: 20px;
  }

  .sbic-login-card .text-muted {
    font-size: 12px;
  }

}
/* ===============================
   SBIC COUNTDOWN CARD (GLASS)
================================ */

.countdown-card {
  border-radius: var(--sbic-radius-lg);

  background: var(--sbic-glass-bg);

  backdrop-filter: var(--sbic-glass-blur-lg);
  -webkit-backdrop-filter: var(--sbic-glass-blur-lg);

  max-width: 420px;
  margin: 32px auto;

  border: 1px solid var(--sbic-border-soft);

  box-shadow:
    var(--sbic-shadow-lg),
    inset 0 0 28px --sbic-blue-soft: rgba(13,110,253,0.25);,
    var(--sbic-glow-soft);
}

.countdown-card h4 {
  font-size: 1.5rem;
  font-weight: 800;

  color: var(--sbic-text-primary);
  letter-spacing: 0.3px;
}

.countdown-card small {
  font-size: 0.8rem;
  color: var(--sbic-text-muted);
}

/* ===============================
   SBIC SEARCH INPUT ICON
================================ */

.searchbox {
  position: relative;
}

.searchbox .input-icon-right {
  font-size: 22px;

  position: absolute;
  right: 10px;
  top: 50%;

  width: 34px;
  height: 34px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--sbic-accent-main);

  transform: translateY(-50%);

  filter: drop-shadow(var(--sbic-glow-soft));
}

/* ===============================
   SBIC DIVIDER
================================ */

.custom-divider {
  border: none !important;
  height: 1px;

  background: linear-gradient(
    to right,
    transparent,
    var(--sbic-border-strong),
    transparent
  );

  box-shadow: none !important;
}

/* ===============================
   SBIC GAUGE
================================ */

.gauge-container {
  width: 200px;
  height: 200px;

  margin: auto;
  position: relative;
}

.gauge-value {
  position: absolute;

  top: 65%;
  left: 50%;

  transform: translate(-50%, -50%);

  font-size: 1.6rem;
  font-weight: 800;

  color: var(--sbic-accent-main);

  text-shadow:
    var(--sbic-glow-main),
    0 0 20px rgba(13,110,253,0.25);
}

/* ===============================
   MOBILE TUNING
================================ */

@media (max-width: 480px) {

  .countdown-card {
    max-width: 94%;
  }

  .gauge-container {
    width: 160px;
    height: 160px;
  }

  .gauge-value {
    font-size: 1.4rem;
  }

}
/* ===============================
   SBIC CARD BASE (GLASS)
================================ */

.card-gradient {
  background: var(--sbic-glass-bg);

  backdrop-filter: var(--sbic-glass-blur-md);
  -webkit-backdrop-filter: var(--sbic-glass-blur-md);

  transition: all 0.3s ease-in-out;

  border: 1px solid var(--sbic-border-soft);

  box-shadow:
    var(--sbic-shadow-lg),
    inset 0 0 26px --sbic-blue-soft: rgba(13,110,253,0.25);,
    var(--sbic-glow-soft);
}

/* Row helper */
.action-row { margin-left:0; margin-right:0; }

/* ===============================
   SBIC FLOW CARD
================================ */

.card-gradient-flow {
  position: relative;

  background: var(--sbic-glass-bg-alt);

  backdrop-filter: var(--sbic-glass-blur-lg);
  -webkit-backdrop-filter: var(--sbic-glass-blur-lg);

  border: 1px solid var(--sbic-border-strong);

  box-shadow:
    var(--sbic-shadow-xl),
    inset 0 0 28px rgba(13,110,253,0.2),
    inset 0 -12px 24px rgba(0,255,140,0.12);

  overflow: hidden;
}

/* smooth flowing neon light */

.card-gradient-flow::before {
  content: "";
  position: absolute;
  inset: -60%;

  background: linear-gradient(
    120deg,
    transparent 32%,
    rgba(0,255,140,0.12) 45%,
    rgba(13,110,253,0.25) 50%,
    rgba(0,255,140,0.12) 55%,
    transparent 70%
  );

  animation: smoothFlow 10s linear infinite;
  pointer-events: none;
}

/* gentle inner glow */

.card-gradient-flow::after {
  content: "";
  position: absolute;
  inset: 0;

  box-shadow: inset 0 0 22px var(--sbic-border-soft);
  pointer-events: none;
}

@keyframes smoothFlow {
  0%   { transform: translateX(-35%); }
  100% { transform: translateX(35%); }
}

/* ===============================
   SBIC ICO CTA
================================ */

.card-gradient-ico {
  position: relative;

  background: var(--sbic-glass-bg-dark);

  backdrop-filter: var(--sbic-glass-blur-sm);
  -webkit-backdrop-filter: var(--sbic-glass-blur-sm);

  border-radius: var(--sbic-radius-md);

  border: 1px solid var(--sbic-border-strong);

  box-shadow:
    var(--sbic-shadow-lg),
    inset 0 0 22px --sbic-blue-soft: rgba(13,110,253,0.25);,
    var(--sbic-glow-soft);

  transition: all 0.35s ease;
}

/* ===============================
   DISABLE FLOW ANIMATION FOR BUY CARD
================================ */

.ico-buy-card::before {
  animation: none !important;
  opacity: 0.25;
}
/* ===============================
   SBIC ACTION CARD
================================ */

.action-card {
  min-height: 84px;
  padding: 10px 6px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;

  border-radius: var(--sbic-radius-md);

  text-align: center;

  background: var(--sbic-glass-bg);

  backdrop-filter: var(--sbic-glass-blur-sm);
  -webkit-backdrop-filter: var(--sbic-glass-blur-sm);

  border: 1px solid var(--sbic-border-soft);

  transition: all 0.25s ease;
}

.action-card i {
  font-size: 1.4rem;

  color: var(--sbic-accent-main);

  filter: drop-shadow(0 0 6px rgba(0,255,140,0.45));
}

.action-card span {
  font-size: 0.8rem;
  font-weight: 700;

  color: var(--sbic-text-primary);
}

.action-card:hover {
  transform: translateY(-2px);

  
}

/* ===============================
   DISABLED / DANGER STATE
================================ */

.action-disabled {
  background: linear-gradient(
    145deg,
    rgba(48,12,12,0.9),
    rgba(20,6,6,0.95)
  );

  border-color: rgba(255,90,90,0.45);
}

.action-disabled i {
  color: var(--sbic-accent-danger);
  filter: none;
}

/* ===============================
   MOBILE
================================ */

@media (max-width: 480px) {

  .action-card {
    min-height: 76px;
    padding: 8px 4px;
  }

  .action-card i {
    font-size: 1.25rem;
  }

  .action-card span {
    font-size: 0.75rem;
  }

}
/* ===============================
   SBIC PACKAGE CARDS (GLASS)
================================ */

.package-card {
  background: var(--sbic-glass-bg);

  backdrop-filter: var(--sbic-glass-blur-lg);
  -webkit-backdrop-filter: var(--sbic-glass-blur-lg);

  color: var(--sbic-text-primary);

  border-radius: var(--sbic-radius-lg);
  padding: 22px;
  margin-bottom: 22px;

  transition: all 0.3s ease-in-out;
  cursor: pointer;

  position: relative;
  overflow: hidden;

  border: 1px solid var(--sbic-border-soft);

  box-shadow:
    var(--sbic-shadow-xl),
    inset 0 0 22px --sbic-blue-soft: rgba(13,110,253,0.25);,
    var(--sbic-glow-soft);
}

/* ===============================
   NEON OUTLINE SWEEP
================================ */

.package-card::before {
  content: "";
  position: absolute;
  inset: 0;

  border-radius: var(--sbic-radius-lg);
  padding: 1px;

  background: linear-gradient(
    135deg,
    var(--sbic-border-strong),
    rgba(13,110,253,0.35),
    transparent
  );

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);

  -webkit-mask-composite: xor;
  pointer-events: none;
}

/* ===============================
   PACKAGE TEXT
================================ */

.package-title {
  font-size: 1.35rem;
  font-weight: 900;

  margin-bottom: 16px;

  display: flex;
  gap: 8px;

  color: var(--sbic-text-primary);
}

.package-detail {
  display: flex;
  justify-content: space-between;

  padding: 6px 0;

  border-bottom: 1px solid var(--sbic-border-soft);

  font-size: 0.92rem;

  color: var(--sbic-text-muted);
}

.package-detail:last-child {
  border-bottom: none;
}

.package-detail span {
  font-weight: 800;
  color: var(--sbic-accent-main);
}

.package-icon {
  color: var(--sbic-accent-main);
  font-size: 1.25rem;

  filter: drop-shadow(0 0 6px rgba(0,255,140,0.45));
}

/* ===============================
   BUY BUTTON
================================ */

.buy-btn {
  display: block;
  width: 100%;

  text-align: center;

  margin-top: 18px;
  padding: 12px 0;

  font-weight: 900;
  font-size: 0.95rem;

  border-radius: var(--sbic-radius-md);
  border: none;

  color: #000;

  background: linear-gradient(
    135deg,
    var(--sbic-accent-main),
    var(--sbic-accent-blue)
  );

  letter-spacing: 0.6px;
  text-transform: uppercase;
  
  transition: 0.25s ease;
}

.buy-btn:hover {
  transform: translateY(-2px);
}

/* ===============================
   INPUTS
================================ */

.package-card input {
  width: 100%;
  padding: 11px;

  border-radius: var(--sbic-radius-sm);

  border: 1px solid var(--sbic-border-muted);

  margin-bottom: 16px;

  font-size: 0.95rem;

  background: rgba(5,18,28,0.9);
  color: var(--sbic-text-primary);

  outline: none;
}

.package-card input::placeholder {
  color: var(--sbic-text-soft);
}

.package-card input:disabled {
  background: rgba(30,34,44,0.85);
  color: #8a90a0;
}

.package-card input:focus {
  border-color: var(--sbic-accent-main);

  box-shadow:
    0 0 0 2px rgba(0,255,140,0.25),
    inset 0 0 6px rgba(13,110,253,0.2);
}

/* ===============================
   PACKAGE DESCRIPTION
================================ */

.package-card p {
  margin-bottom: 20px;

  font-size: 0.95rem;

  color: var(--sbic-text-muted);
}

/* ===============================
   PAGE CONTAINER
================================ */

.page-container {
  max-width: 420px;
  margin: 0 auto;

  padding: 18px 15px 40px;
}


/* ===============================
   TYPOGRAPHY
================================ */

h5 {
  font-size: 1.05rem;
  font-weight: 800;

  color: var(--sbic-text-primary);

  margin-bottom: 12px;
  letter-spacing: 0.4px;
}

.h5-muted {
  color: var(--sbic-text-muted);
  font-weight: 600;
}

.package-card h5,
.card-gradient h5,
.action-box h5 {
  color: var(--sbic-text-primary);
}

h2 {
  font-size: 1.65rem;
  font-weight: 900;

  color: var(--sbic-text-primary);

  margin-bottom: 16px;
  letter-spacing: 0.6px;
}

.h2-muted {
  color: var(--sbic-text-muted);
  font-weight: 700;
}

/* ===============================
   MOBILE
================================ */

@media (max-width: 480px) {

  .package-card {
    padding: 18px;
  }

  .buy-btn {
    font-size: 0.9rem;
  }

}
/* ===============================
   SBIC SIDEBAR ROOT (GLASS)
================================ */

#sidebarPanel .modal-content {
  background: var(--sbic-glass-bg);

  backdrop-filter: var(--sbic-glass-blur-lg);
  -webkit-backdrop-filter: var(--sbic-glass-blur-lg);

  border: none;

  box-shadow:
    var(--sbic-shadow-xl),
    inset 0 0 26px rgba(13,110,253,0.2),
    var(--sbic-glow-soft);
}

/* ===============================
   PROFILE HEADER
================================ */

#sidebarPanel .profileBox .image-wrapper img {
  width: 36px;
  height: 36px;

  border-radius: 50%;
  object-fit: cover;

  border: 2px solid var(--sbic-border-strong);

  box-shadow:
    0 0 10px rgba(0,255,140,0.6),
    0 0 16px rgba(13,110,253,0.25);
}

#sidebarPanel .profileBox strong {
  font-size: 0.95rem;
  color: var(--sbic-text-primary);
}

#sidebarPanel .profileBox .text-muted {
  font-size: 0.75rem;
  color: var(--sbic-text-muted) !important;
}

/* ===============================
   SECTION TITLES
================================ */

#sidebarPanel .listview-title {
  font-size: 0.68rem;
  font-weight: 800;

  letter-spacing: 0.9px;
  text-transform: uppercase;

  color: var(--sbic-accent-main);

  padding: 6px 12px 2px;
}

/* ===============================
   MENU ITEM (DEFAULT)
================================ */

#sidebarPanel .listview .item {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 8px 12px;
  margin: 4px 8px;

  border-radius: var(--sbic-radius-sm);

  background: var(--sbic-glass-bg-alt);

  backdrop-filter: var(--sbic-glass-blur-sm);

  border: 1px solid var(--sbic-border-soft);

  transition: all 0.22s ease-in-out;
}

/* Hover */

#sidebarPanel .listview .item:hover {
  border-color: var(--sbic-border-strong);

  box-shadow:
    0 0 0 1px var(--sbic-border-strong),
    var(--sbic-shadow-md);
}

/* ===============================
   ACTIVE MENU ITEM
================================ */

#sidebarPanel .listview .item.active {
  background: linear-gradient(
    90deg,
    rgba(0,255,140,0.45),
    rgba(13,110,253,0.28)
  );

  border-color: var(--sbic-accent-main);

  box-shadow:
    0 0 0 1px var(--sbic-border-strong),
    var(--sbic-glow-main);
}

/* ===============================
   MENU TEXT
================================ */

#sidebarPanel .listview .in {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--sbic-text-primary);
}

/* ===============================
   TRANSACTIONS
================================ */

.transactions {
  padding: 0;
}

.transactions .item {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 10px 12px;
  margin: 6px 8px;

  border-radius: var(--sbic-radius-md);

  background: var(--sbic-glass-bg);

  backdrop-filter: var(--sbic-glass-blur-md);

  border: 1px solid var(--sbic-border-soft);

  box-shadow:
    var(--sbic-shadow-md),
    inset 0 0 18px --sbic-blue-soft: rgba(13,110,253,0.25);;
}

.transactions .detail {
  display: flex;
  align-items: center;
  gap: 10px;
}

.transactions .icon-box {
  width: 34px;
  height: 34px;

  border-radius: var(--sbic-radius-sm);

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(0,255,140,0.18);

  border: 1px solid var(--sbic-border-strong);
}

.transactions ion-icon {
  font-size: 20px !important;
  color: var(--sbic-accent-main) !important;
}

.transactions .left {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--sbic-text-primary);
}

.transactions .left p {
  margin: 2px 0 0;
  font-size: 0.7rem;
  color: var(--sbic-text-muted);
}

.transactions .right {
  text-align: right;
}

.transactions .value {
  font-size: 0.85rem;
  font-weight: 700;

  color: var(--sbic-accent-main);
}

.transactions .value span {
  font-size: 0.7rem;
  font-weight: 600;

  color: var(--sbic-text-muted);
  margin-left: 3px;
}

/* ===============================
   MOBILE
================================ */

@media (max-width: 480px) {

  .transactions .item {
    padding: 8px 10px;
    margin: 5px 6px;
  }

  .transactions .icon-box {
    width: 30px;
    height: 30px;
  }

  .transactions .value {
    font-size: 0.7rem;
  }

}
/* ===============================
   SBIC ICO TIMELINE WRAPPER
================================ */

.ico-timeline {
  position: relative;
  padding-left: 22px;
}

.ico-timeline::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 0;
  bottom: 0;
  width: 2px;

  background: linear-gradient(
    180deg,
    var(--sbic-border-strong),
    rgba(13,110,253,0.35),
    var(--sbic-border-soft)
  );

  box-shadow: 0 0 12px var(--sbic-glow-soft);
}

/* ===============================
   TIMELINE NODE
================================ */

.ico-node {
  position: relative;
  margin-bottom: 26px;
}

.ico-node::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 26px;

  width: 12px;
  height: 12px;

  border-radius: 50%;

  background: var(--sbic-accent-main);

  box-shadow:
    0 0 10px var(--sbic-glow-soft),
    0 0 16px rgba(13,110,253,0.35);
}

/* ===============================
   CARD STATES
================================ */

.ico-card {
  border-radius: var(--sbic-radius-lg);
  padding: 18px;

  background: var(--sbic-glass-bg);

  backdrop-filter: var(--sbic-glass-blur-lg);
  -webkit-backdrop-filter: var(--sbic-glass-blur-lg);

  border: 1px solid var(--sbic-border-soft);

  box-shadow:
    var(--sbic-shadow-lg),
    inset 0 0 22px --sbic-blue-soft: rgba(13,110,253,0.25);;

  position: relative;
}

/* ACTIVE ROUND */

.ico-card.active {
  border-color: var(--sbic-border-strong);

  box-shadow:
    var(--sbic-shadow-xl),
    inset 0 0 0 1px var(--sbic-border-soft),
    var(--sbic-glow-main);

  overflow: hidden;
}

/* animated highlight */

.ico-card.active::before {
  content: "";
  position: absolute;
  inset: -40%;

  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(0,255,140,0.15) 45%,
    rgba(13,110,253,0.3) 50%,
    rgba(0,255,140,0.15) 55%,
    transparent 70%
  );

  animation: icoActiveFlow 10s linear infinite;
  pointer-events: none;
}

/* INACTIVE */

.ico-card.inactive {
  opacity: 0.55;
  filter: saturate(0.7);
}

/* ===============================
   HEADER / BODY / FOOTER
================================ */

.ico-header {
  text-align: center;
  padding-bottom: 12px;
  margin-bottom: 14px;

  border-bottom: 1px solid var(--sbic-border-soft);
}

.ico-title {
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--sbic-text-primary);
}

.ico-sub {
  font-size: 0.72rem;
  color: var(--sbic-text-muted);
  font-weight: 600;
}

/* rows */

.ico-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ico-row {
  display: flex;
  justify-content: space-between;

  font-size: 0.88rem;

  padding-bottom: 6px;

  border-bottom: 1px dashed var(--sbic-border-soft);
}

.ico-row:last-child {
  border-bottom: none;
}

.ico-label {
  color: var(--sbic-text-muted);
  font-weight: 600;
}

.ico-value {
  color: var(--sbic-accent-main);
  font-weight: 800;
}

/* ===============================
   FOOTER
================================ */

.ico-footer {
  margin-top: 16px;
}

.ico-progress-track {
  height: 8px;

  background: rgba(255,255,255,0.12);

  border-radius: 10px;

  overflow: hidden;
}

.ico-progress-fill {
  height: 100%;

  background: linear-gradient(
    90deg,
    var(--sbic-accent-main),
    var(--sbic-accent-blue)
  );

  box-shadow:
    var(--sbic-glow-soft),
    0 0 18px rgba(13,110,253,0.35);

  transition: width 0.8s ease;
}

@keyframes icoActiveFlow {
  from { transform: translateX(-35%); }
  to   { transform: translateX(35%); }
}

/* ===============================
   STATUS BADGE
================================ */

.ico-badge {
  display: inline-block;

  padding: 4px 10px;

  border-radius: var(--sbic-radius-sm);

  font-size: 0.65rem;
  font-weight: 800;

  letter-spacing: 0.6px;
  text-transform: uppercase;

  margin-top: 6px;
}

/* LIVE */

.ico-badge.live {
  background: rgba(0,255,140,0.22);
  color: var(--sbic-accent-main);

  border: 1px solid var(--sbic-border-strong);

  box-shadow: var(--sbic-glow-soft);
}

/* CLOSED */

.ico-badge.closed {
  background: rgba(255,90,90,0.18);
  color: #ff9c9c;

  border: 1px solid rgba(255,90,90,0.45);
}

/* UPCOMING */

.ico-badge.upcoming {
  background: --sbic-blue-soft: rgba(13,110,253,0.25);;
  color: #6bb6ff;

  border: 1px solid rgba(13,110,253,0.45);
}

/* ===============================
   BUY BUTTON
================================ */

.ico-buy-btn {
  display: block;

  margin-top: 16px;
  padding: 12px 0;

  text-align: center;

  border-radius: var(--sbic-radius-md);

  font-size: 0.85rem;
  font-weight: 900;

  letter-spacing: 0.6px;
  text-transform: uppercase;

  color: #000;

  background: linear-gradient(
    135deg,
    var(--sbic-accent-main),
    var(--sbic-accent-blue)
  );
  transition: 0.25s ease;
}

.ico-buy-btn:hover {
  transform: translateY(-2px);
}

/* DISABLED */

.ico-buy-btn:disabled {
  background: linear-gradient(
    180deg,
    rgba(180,180,180,0.25),
    rgba(120,120,120,0.2)
  ) !important;

  color: rgba(255,255,255,0.5) !important;

  box-shadow: none !important;

  cursor: not-allowed;

  filter: grayscale(0.4);

  opacity: 0.65;
}

/* Normalize ONLY button */

button.ico-buy-btn {
  border: none;
  outline: none;
  background-clip: padding-box;
  font-family: inherit;
}

button.ico-buy-btn:disabled {
  pointer-events: none;
}

/* ===============================
   DATE ROW
================================ */

.ico-date-row {
  display: flex;
  justify-content: space-between;

  font-size: 0.8rem;

  margin-top: 10px;
  padding-top: 10px;
}

.ico-date {
  color: var(--sbic-text-muted);
  font-weight: 600;
}

.ico-date span {
  display: block;
  font-size: 0.7rem;
  color: var(--sbic-text-soft);
}


/* ===============================
   STAKING PAGE WRAPPER
================================ */

.staking-page,
.staking-execution {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-inline: clamp(12px, 4vw, 24px);
}

/* ===============================
   SURFACE / SECTION (GLASS)
================================ */

.stake-surface {
  background: linear-gradient(
    145deg,
    var(--sbic-surface-1),
    var(--sbic-surface-2)
  );

  backdrop-filter: var(--sbic-glass-blur-lg);
  -webkit-backdrop-filter: var(--sbic-glass-blur-lg);

  border-radius: var(--sbic-radius-lg);
  padding: 20px;

  border: 1px solid var(--sbic-accent-soft);

  box-shadow:
    var(--sbic-shadow-xl),
    inset 0 0 22px --sbic-blue-soft: rgba(13,110,253,0.25);;
}

@media (max-width:480px) {
  .stake-surface { border-radius: var(--sbic-radius-md); }
}

/* ===============================
   SECTION TITLES
================================ */

.stake-section-title {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 16px;

  color: var(--sbic-text-primary);
}

.stake-section-title.muted {
  color: var(--sbic-text-muted);
}

/* ===============================
   GRID HELPERS
================================ */

.stake-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.stake-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

/* ===============================
   STAKE METRIC (GLASS TILE)
================================ */

.stake-metric {
  background: linear-gradient(
    145deg,
    rgba(22,48,70,0.8),
    rgba(8,22,32,0.95)
  );

  backdrop-filter: var(--sbic-glass-blur-md);

  border-radius: var(--sbic-radius-md);
  padding: 14px;

  display: flex;
  flex-direction: column;
  gap: 6px;

  border: 1px solid var(--sbic-accent-soft);
}

.stake-metric ion-icon {
  font-size: 20px;
  color: var(--sbic-accent-main);
  filter: drop-shadow(0 0 6px rgba(0,255,140,0.45));
}

.stake-metric span {
  font-size: 12px;
  color: var(--sbic-text-muted);
}

.stake-metric strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--sbic-text-primary);
}

.stake-metric.highlight strong {
  color: var(--sbic-accent-main);
}

/* =====================================================
   SBIC STAKE PROGRAM SET
===================================================== */

.stake-programs {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ===============================
   PROGRAM CARD (GLASS)
================================ */

.stake-program {
  background: linear-gradient(
    145deg,
    var(--sbic-surface-1),
    var(--sbic-surface-2)
  );

  backdrop-filter: var(--sbic-glass-blur-xl);
  -webkit-backdrop-filter: var(--sbic-glass-blur-xl);

  border-radius: var(--sbic-radius-xl);
  padding: 22px 20px;

  display: flex;
  flex-direction: column;
  gap: 16px;

  text-align: center;

  border: 1px solid var(--sbic-accent-soft);

  box-shadow:
    var(--sbic-shadow-lg),
    inset 0 0 22px --sbic-blue-soft: rgba(13,110,253,0.25);;
}

/* PREMIUM VARIANT */

.stake-program.premium {
  box-shadow:
    var(--sbic-shadow-xl),
    inset 0 0 0 1px var(--sbic-accent-soft),
    var(--sbic-glow-soft);
}

/* ===============================
   PROGRAM HEADER
================================ */

.program-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.program-head ion-icon {
  font-size: 34px;

  color: var(--sbic-accent-main);

  padding: 10px;

  border-radius: 50%;

  background: rgba(0,255,140,0.15);

  box-shadow:
    var(--sbic-glow-soft),
    0 0 20px rgba(13,110,253,0.3);
}

.program-head h5 {
  margin: 0;

  font-size: 1.05rem;
  font-weight: 800;

  color: var(--sbic-text-primary);
}

/* ===============================
   PROGRAM DESCRIPTION
================================ */

.stake-program p {
  margin: 0;

  font-size: 0.9rem;
  line-height: 1.45;

  color: var(--sbic-text-muted);
}

/* ===============================
   PROGRAM STATS
================================ */

.program-stats {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.program-stats div {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 8px 12px;

  border-radius: var(--sbic-radius-sm);

  border: 1px solid var(--sbic-accent-soft);

  background: rgba(6,20,30,0.55);
}

.program-stats span {
  font-size: 0.75rem;
  font-weight: 700;

  color: var(--sbic-text-muted);
}

.program-stats strong {
  font-size: 0.85rem;
  font-weight: 900;

  color: var(--sbic-accent-main);
}

/* ===============================
   CTA BUTTONS (SBIC TOKENIZED)
================================ */

.stake-btn,
.stake-cta,
.stake-submit-btn,
.stake-submit-btn-slim {

  display: block;
  width: 100%;

  text-align: center;

  padding: 14px;

  border-radius: var(--sbic-radius-md);

  font-weight: 900;
  letter-spacing: .4px;

  border: none;

  background: linear-gradient(
    135deg,
    var(--sbic-accent-main),
    var(--sbic-accent-blue)
  );

  color: #000;
  cursor: pointer;

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    filter 0.15s ease;
}

.stake-submit-btn-slim {
  padding: 10px 14px;
  font-size: 0.9rem;
  font-weight: 800;
  margin-top: 10px;

}

/* Disabled */

.stake-submit-btn:disabled {
  opacity: .45;
  box-shadow: none;
  cursor: not-allowed;
}


/* ===============================
   STAKE PLAN GRID
================================ */

.stake-plan-grid {
  display: grid;
  gap: 18px;
}


/* ===============================
   MOBILE
================================ */

@media (max-width: 640px) {

  .stake-grid-2 {
    gap: 12px;
  }

  .stake-program {
    padding: 20px;
  }

  .stake-grid-stack {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }

}


/* ===============================
   SBIC STAKE PLAN CARD (BASE)
================================ */

.stake-plan-card {

  background: var(--sbic-glass-bg);

  backdrop-filter: var(--sbic-glass-blur-xl);
  -webkit-backdrop-filter: var(--sbic-glass-blur-xl);

  border-radius: var(--sbic-radius-lg);

  padding: 18px;

  display: flex;
  flex-direction: column;
  gap: 16px;

  box-shadow:
    var(--sbic-shadow-xl),
    inset 0 0 22px --sbic-blue-soft: rgba(13,110,253,0.25);
}


/* ===============================
   TIERS (TOKENIZED)
================================ */

.stake-plan-card.silver {
  border-color: rgba(180,200,220,0.35);

  box-shadow:
    var(--sbic-shadow-lg),
    inset 0 0 0 1px rgba(180,200,220,0.2);
}

.stake-plan-card.gold {
  border-color: rgba(255,193,7,0.55);

  box-shadow:
    var(--sbic-shadow-lg),
    inset 0 0 0 1px rgba(255,193,7,0.28),
    0 0 24px --sbic-warn-soft: rgba(255,193,7,0.25);
}

.stake-plan-card.gold-plus {

  background:
    radial-gradient(
      circle at top,
      --sbic-gold-soft: rgba(255,215,120,0.25);,
      transparent 55%
    ),
    var(--sbic-glass-bg-alt);

  border-color: rgba(255,215,120,0.75);

  box-shadow:
    var(--sbic-shadow-xl),
    0 0 28px rgba(255,215,120,0.3),
    inset 0 0 0 1px rgba(255,215,120,0.4);
}

.stake-plan-card.platinum {
  border-color: rgba(120,200,220,0.55);

  box-shadow:
    var(--sbic-shadow-xl),
    inset 0 0 0 1px rgba(120,200,220,0.28),
    0 0 20px rgba(120,200,220,0.2);
}

.stake-plan-card.diamond {
  border-color: var(--sbic-border-strong);

  box-shadow:
    var(--sbic-shadow-xl),
    inset 0 0 0 1px var(--sbic-border-strong),
    var(--sbic-glow-soft);
}


/* ===============================
   HEADER
================================ */

.stake-plan-header {
  position: relative;
}

.stake-plan-title {
  display: flex;
  align-items: center;
  gap: 10px;

  color: var(--sbic-accent-main);
}

.stake-plan-title ion-icon {
  font-size: 22px;
  color: var(--sbic-accent-main);

  filter: drop-shadow(0 0 6px rgba(0,255,140,0.45));
}

.stake-plan-title h4 {
  margin: 0;

  font-size: 18px;
  font-weight: 800;

  color: var(--sbic-accent-main);
}

.stake-plan-range {
  font-size: 13px;
  color: var(--sbic-text-muted);

  margin-top: 4px;
}

/* ===============================
   BADGES (SBIC TOKENIZED)
================================ */

.stake-badge {

  padding: 6px 12px;

  border-radius: var(--sbic-radius-md);

  font-size: 10px;
  font-weight: 900;

  letter-spacing: .4px;
  text-transform: uppercase;

  color: var(--sbic-text-primary);
}


/* Flexible */

.stake-badge.flexible {

  background: rgba(0,255,140,0.22);

  color: var(--sbic-accent-main);

  border: 1px solid var(--sbic-border-strong);
}


/* Term */

.stake-badge.term {

  background: rgba(255,255,255,0.15);

  color: var(--sbic-text-primary);

  border: 1px solid var(--sbic-border-muted);
}


/* Recommend */

.stake-badge.recommend {

  background: linear-gradient(
    135deg,
    var(--sbic-accent-main),
    var(--sbic-accent-blue)
  );

  color: #000;

  box-shadow: var(--sbic-glow-soft);
}


/* ===============================
   METRICS GRID
================================ */

.stake-plan-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}


/* ===============================
   METRIC TILE (TOKENIZED)
================================ */

.metric {

  background: var(--sbic-glass-bg-alt);

  backdrop-filter: var(--sbic-glass-blur-md);
  -webkit-backdrop-filter: var(--sbic-glass-blur-md);

  border-radius: var(--sbic-radius-sm);

  padding: 12px;

  border: 1px solid var(--sbic-border-soft);

  box-shadow:
    inset 0 0 14px --sbic-blue-soft: rgba(13,110,253,0.25);;
}

.metric span {

  font-size: 12px;

  color: var(--sbic-text-muted);
}

.metric strong {

  display: block;

  margin-top: 4px;

  font-size: 14px;
  font-weight: 800;

  color: var(--sbic-text-primary);
}

.metric.highlight strong {

  color: var(--sbic-accent-main);
}
/* =====================================================
   SBIC STAKE EXECUTION (TOKENIZED)
===================================================== */
/* ===============================
   EXECUTION CARD (GLASS)
================================ */

.stake-exec-card {

  background: var(--sbic-glass-bg);

  backdrop-filter: var(--sbic-glass-blur-lg);
  -webkit-backdrop-filter: var(--sbic-glass-blur-lg);

  border-radius: var(--sbic-radius-lg);

  padding: 22px;

  border: 1px solid var(--sbic-border-soft);

  box-shadow: var(--sbic-shadow-card);
}


/* ===============================
   EXECUTION HEADER
================================ */

.stake-exec-header {

  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 18px;
}

.stake-exec-title {

  display: flex;
  align-items: center;
  gap: 10px;
}

.stake-exec-title ion-icon {

  font-size: 24px;

  color: var(--sbic-accent-main);

  filter: drop-shadow(var(--sbic-glow-icon));
}

.stake-exec-title h3 {

  margin: 0;

  font-size: 20px;
  font-weight: 900;

  color: var(--sbic-text-primary);
}


/* ===============================
   STAKE TYPE BADGE
================================ */

.stake-type {

  padding: 6px 14px;

  border-radius: var(--sbic-radius-pill);

  font-size: 11px;
  font-weight: 900;

  letter-spacing: .4px;
  text-transform: uppercase;
}


/* Flexible */

.stake-type.flexible {

  background: var(--sbic-accent-bg-soft);

  color: var(--sbic-accent-main);

  border: 1px solid var(--sbic-border-strong);

  box-shadow: var(--sbic-glow-soft);
}


/* Term */

.stake-type.term {

  background: rgba(255,255,255,0.15);

  color: var(--sbic-text-primary);

  border: 1px solid var(--sbic-border-muted);
}

/* ===============================
   PLAN INFO GRID (TOKENIZED)
================================ */

.stake-exec-info {

  display: grid;
  grid-template-columns: repeat(2,1fr);

  gap: 12px;

  margin-bottom: 20px;
}


/* ===============================
   INFO TILE
================================ */

.info-item {

  background: var(--sbic-glass-bg-alt);

  backdrop-filter: var(--sbic-glass-blur-md);

  border-radius: var(--sbic-radius-md);

  padding: 14px;

  border: 1px solid var(--sbic-border-soft);

  box-shadow: var(--sbic-shadow-inset-soft);
}

.info-item span {

  font-size: 12px;

  color: var(--sbic-text-muted);
}

.info-item strong {

  display: block;
  margin-top: 6px;

  font-size: 15px;
  font-weight: 800;

  color: var(--sbic-text-primary);
}

.info-item.highlight strong {

  color: var(--sbic-accent-main);
}


/* ===============================
   FORM LABEL
================================ */

.stake-input-label {

  font-size: 13px;
  font-weight: 700;

  color: var(--sbic-text-muted);
}


/* ===============================
   AMOUNT INPUT (GLASS)
================================ */

.stake-input-wrap {

  margin-top: 6px;

  display: flex;

  background: var(--sbic-input-bg);

  backdrop-filter: var(--sbic-glass-blur-sm);

  border-radius: var(--sbic-radius-lg);

  overflow: hidden;

  border: 1px solid var(--sbic-border-strong);
}

.stake-input-wrap input {

  flex: 1;

  background: transparent;

  border: none;

  padding: 16px;

  color: var(--sbic-text-primary);

  font-size: 16px;

  outline: none;
}

.stake-input-wrap input::placeholder {

  color: var(--sbic-text-placeholder);
}


/* ===============================
   MAX BUTTON
================================ */

.stake-max-btn {

  padding: 0 18px;

  background: var(--sbic-gradient-main);

  color: var(--sbic-text-dark);

  font-weight: 900;

  border: none;

  cursor: pointer;

  letter-spacing: .4px;

  transition: var(--sbic-transition-fast);
}

.stake-max-btn:hover {

  filter: brightness(1.1);
}


/* ===============================
   STATS ROW
================================ */

.stake-exec-stats {

  display: flex;
  justify-content: space-between;

  margin-top: 14px;

  font-size: 13px;
}

.stake-exec-stats span {

  color: var(--sbic-text-muted);
}

.stake-exec-stats strong {

  font-weight: 800;

  color: var(--sbic-text-primary);
}


/* ===============================
   VALIDATION / HINT
================================ */

.stake-exec-hint {

  margin-top: 10px;

  min-height: 18px;

  font-size: 13px;

  color: var(--sbic-accent-main);
}

.stake-exec-hint.warn {

  color: var(--sbic-warning);
}

.stake-exec-hint.error {

  color: var(--sbic-danger);
}
/* ===============================
   SBIC NFT PREVIEW (TOKENIZED)
================================ */

.stake-nft {

  cursor: zoom-in;

  position: relative;
}

.stake-nft img {

  width: 100%;

  border-radius: var(--sbic-radius-md);

  margin-bottom: 10px;

  transition:
    transform var(--sbic-transition-fast),
    box-shadow var(--sbic-transition-fast),
    filter var(--sbic-transition-fast);
}

.stake-nft:hover img {

  transform: scale(1.04);

  box-shadow:
    var(--sbic-shadow-lg),
    var(--sbic-glow-soft);
}


/* ===============================
   SBIC EMPTY STATE (GLASS)
================================ */

.stake-empty {

  background: var(--sbic-glass-bg);

  backdrop-filter: var(--sbic-glass-blur-sm);
  -webkit-backdrop-filter: var(--sbic-glass-blur-sm);

  padding: 24px;

  border-radius: var(--sbic-radius-lg);

  text-align: center;

  color: var(--sbic-text-muted);

  border: 1px solid var(--sbic-border-soft);

  box-shadow:
    var(--sbic-shadow-lg),
    var(--sbic-shadow-inset-soft);
}


/* ===============================
   STAKE METRIC – CENTER ALIGN
================================ */

.stake-metric {

  align-items: center;

  text-align: center;
}

.stake-metric ion-icon {

  margin: 0;
}

.stake-metric span {

  display: block;

  font-weight: 700;

  margin-top: 4px;
}

.stake-metric strong {

  margin-top: 6px;

  text-align: center;
}


/* ===============================
   INLINE UNIT
================================ */

.stake-metric strong .unit {

  display: inline;

  font-size: 0.7em;

  font-weight: 600;

  margin-left: 6px;

  vertical-align: middle;

  color: var(--sbic-text-soft);
}


/* ===============================
   HEADER ALIGNMENT FIX
================================ */

.stake-plan-header {

  display: flex;

  flex-direction: column;

  gap: 12px;
}

.stake-plan-head-row {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 12px;
}

.stake-plan-left {

  display: flex;

  flex-direction: column;

  gap: 4px;

  min-width: 0;
}


/* badges stay right */

.stake-plan-badges {

  display: flex;

  gap: 6px;

  align-items: center;

  flex-shrink: 0;

  position: static !important;

  top: auto !important;

  right: auto !important;
}


/* ===============================
   MOBILE
================================ */

@media (max-width: 480px) {

  .stake-plan-head-row {

    align-items: center;
  }

  .stake-plan-badges {

    flex-wrap: wrap;

    justify-content: flex-end;
  }

}

/* ===============================
   STAKING LIMIT TILE (EXECUTION)
================================ */

.stake-limit-box {

  display: flex;
  flex-direction: column;
  gap: 4px;

  background: linear-gradient(
    145deg,
    rgba(0,255,140,0.14),
    rgba(10,40,30,0.6)
  );

  border: 1px solid var(--sbic-border-strong);

  padding: 10px 14px;

  border-radius: var(--sbic-radius-md);

  min-width: 150px;

}

/* label */

.stake-limit-box span {
  font-size: 11px;
  font-weight: 700;
  color: var(--sbic-text-muted);
  white-space: nowrap;
}

/* value */

.stake-limit-box strong {

  display: flex;
  align-items: baseline;
  gap: 4px;

  font-size: 15px;
  font-weight: 900;

  color: var(--sbic-accent-main);

  text-shadow: var(--sbic-glow-soft);
}

/* unit */

.stake-limit-box .unit {

  font-size: 0.7em;
  font-weight: 600;

  color: var(--sbic-text-soft);
}


/* ===============================
   INLINE MODE (ROW)
================================ */

.stake-limit-box.inline {

  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  gap: 10px;

}

.stake-limit-box.inline span {
  margin: 0;
}

.stake-limit-box.inline strong {
  margin: 0;
}


/* ===============================
   MOBILE TUNING
================================ */

@media (max-width: 480px) {

  .stake-limit-box {
    min-width: unset;
    width: 100%;
  }

  .stake-limit-box.inline {
    justify-content: space-between;
  }

}