/* ═══════════════════════════════════════════════════════════════
   IFP DApp Premium UI  ·  v3
   Sits on top of style.css — overrides where needed
   ═══════════════════════════════════════════════════════════════ */

/* ─── Keyframes ──────────────────────────────────────────────── */
@keyframes ifp-float {
  0%,100% { transform:translateY(0)   }
  50%      { transform:translateY(-7px) }
}
@keyframes ifp-glow-breathe {
  0%,100% { opacity:.55 }
  50%      { opacity:1   }
}
@keyframes ifp-fadeup {
  from { opacity:0; transform:translateY(12px) }
  to   { opacity:1; transform:translateY(0)    }
}
@keyframes ifp-shimmer {
  0%   { background-position:-400px 0 }
  100% { background-position: 400px 0 }
}
@keyframes ifp-net-pulse {
  0%,100% { box-shadow:0 0 0 0 rgba(16,185,129,.6); opacity:1  }
  65%      { box-shadow:0 0 0 6px rgba(16,185,129,0); opacity:.7 }
}
@keyframes ifp-pill-in {
  from { transform:scale(.8); opacity:0 }
  to   { transform:scale(1);  opacity:1 }
}
/* Protocol scan-line sweep — unique IFP atmospheric effect */
@keyframes ifp-scanline {
  0%   { top:-10%; opacity:0 }
  6%   { opacity:1 }
  92%  { opacity:.5 }
  100% { top:110%; opacity:0 }
}
/* Protocol bar live dot blink */
@keyframes ifp-proto-blink {
  0%,100% { opacity:1 }
  50%      { opacity:.25 }
}
/* Aurora breathing — very subtle shift on background glow */
@keyframes ifp-aurora {
  0%,100% { opacity:.85 }
  50%      { opacity:1 }
}

/* ─── 0a. Syne headings — geometric font unique to IFP ─────── */
h1, h2, h3,
.login-exchangtext,
.balance-value,
.balance-label,
.investment-value,
.statement-hero-balance,
.swap-hero-title, .pkg-hero-title, .calc-hero-title,
.statement-hero-asset,
.profile-back-title,
.section-title,
.roi-pct {
  font-family: 'Syne', var(--secondary-font), sans-serif !important;
}

/* ─── 0b. Protocol status bar ───────────────────────────────── */
.ifp-proto-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 16px;
  background: rgba(0,229,245,.04);
  border-bottom: 1px solid rgba(0,229,245,.1);
  font-family: "JetBrains Mono","Consolas",monospace;
  font-size: 9px;
  letter-spacing: .18em;
  color: rgba(0,229,245,.5);
  text-transform: uppercase;
  position: relative;
  z-index: 50;
  user-select: none;
  flex-shrink: 0;
}
.ifp-proto-node {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  color: rgba(0,229,245,.75);
}
.ifp-proto-dot-sm {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #10B981;
  flex-shrink: 0;
  animation: ifp-proto-blink 2.4s ease-in-out infinite;
}
.ifp-proto-sep { opacity: .22; }
.ifp-proto-live {
  color: #10B981;
  font-weight: 700;
  letter-spacing: .22em;
}

/* ─── 0c. Protocol scan-line (fixed atmospheric sweep) ──────── */
.ifp-scanline {
  position: fixed;
  left: 0; right: 0;
  height: 90px;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0,229,245,.02) 25%,
    rgba(0,229,245,.05) 50%,
    rgba(0,229,245,.02) 75%,
    transparent 100%
  );
  animation: ifp-scanline 16s ease-in-out infinite;
}

/* ─── 0d. Cut-corner notch — removed from dashboard boxes ────── */
/* (Kept for auth-card below) */

/* ─── 0e. Left accent bars — removed ────────────────────────── */

/* Auth card also gets the notch */
.auth-card {
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px)) !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

/* ─── 1. Root overrides — IFP unique identity ────────────────── */
:root {
  /* Deep-black base — makes neon pop harder than navy */
  --t9-bg-deep  : #010306;
  --t9-bg       : #020508;
  --t9-bg-soft  : #06101E;
  --t9-surface  : #091828;
  --t9-surface-2: #0D2035;

  /* Electric cyan (brighter than #22D3EE) */
  --t9-accent       : #00E5F5;
  --t9-accent-2     : #1D4ED8;
  --t9-accent-3     : #1E3A8A;
  --t9-accent-glow  : rgba(0,229,245,0.35);
  --t9-border       : rgba(0,229,245,0.13);
  --t9-border-strong: rgba(0,229,245,0.38);
  --t9-grad         : linear-gradient(135deg,#00E5F5 0%,#1D4ED8 60%,#1E3A8A 100%);
  --t9-grad-line    : linear-gradient(90deg,rgba(0,229,245,0) 0%,#00E5F5 50%,rgba(0,229,245,0) 100%);

  /* IFP Gold — financial accent, used on balance / invest / amounts */
  --ifp-gold      : #F59E0B;
  --ifp-gold-soft : rgba(245,158,11,0.14);
  --ifp-gold-glow : rgba(245,158,11,0.35);

  /* Glass system */
  --ifp-glass-bg  : rgba(2,5,8,0.82);
  --ifp-card-bg   : rgba(255,255,255,0.032);
  --ifp-card-bdr  : rgba(0,229,245,0.13);
  --ifp-glow-cyan : rgba(0,229,245,0.28);
  --ifp-nav-h     : 72px;
}

/* ─── 2. Background atmosphere ───────────────────────────────── */
.mobile-container.home-container {
  background:
    /* IFP hex-shield watermark — 3 concentric hexagons, matches logo */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 115'%3E%3Cpath d='M50 2.5 L97.6 30 L97.6 85 L50 112.5 L2.4 85 L2.4 30 Z' fill='none' stroke='%2300e5f5' stroke-opacity='.07' stroke-width='.9'/%3E%3Cpath d='M50 19 L82 37.5 L82 77.5 L50 96 L18 77.5 L18 37.5 Z' fill='none' stroke='%2300e5f5' stroke-opacity='.05' stroke-width='.7'/%3E%3Cpath d='M50 35 L67 45 L67 70 L50 80 L33 70 L33 45 Z' fill='none' stroke='%23f59e0b' stroke-opacity='.045' stroke-width='.6'/%3E%3C/svg%3E") center 42% / 320px no-repeat,
    radial-gradient(ellipse 110% 55% at 50%  -6%, rgba(0,229,245,.16) 0%, transparent 52%),
    radial-gradient(ellipse  60% 45% at 95%  72%, rgba(29,78,216,.14) 0%, transparent 52%),
    radial-gradient(ellipse  50% 40% at  3%  58%, rgba(245,158,11,.06) 0%, transparent 50%),
    #020508 !important;
}

/* ── Hexagonal grid (matches IFP shield logo) ── */
.home-container::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(30deg,  rgba(0,229,245,.045) 12%, transparent 12.5%, transparent 87.5%, rgba(0,229,245,.045) 87.5%),
    linear-gradient(150deg, rgba(0,229,245,.045) 12%, transparent 12.5%, transparent 87.5%, rgba(0,229,245,.045) 87.5%),
    linear-gradient(30deg,  rgba(0,229,245,.045) 12%, transparent 12.5%, transparent 87.5%, rgba(0,229,245,.045) 87.5%),
    linear-gradient(150deg, rgba(0,229,245,.045) 12%, transparent 12.5%, transparent 87.5%, rgba(0,229,245,.045) 87.5%),
    linear-gradient(60deg,  rgba(0,229,245,.06)  25%, transparent 25.5%, transparent 75%,   rgba(0,229,245,.06)  75%),
    linear-gradient(60deg,  rgba(0,229,245,.06)  25%, transparent 25.5%, transparent 75%,   rgba(0,229,245,.06)  75%);
  background-size:     46px 80px;
  background-position: 0 0, 0 0, 23px 40px, 23px 40px, 0 0, 23px 40px;
  z-index: 1; pointer-events: none; opacity: .85;
}
/* Do NOT override position on children — sidebar/overlay/nav need position:fixed */

/* Auth pages — same hex grid */
.auth-container {
  background:
    radial-gradient(ellipse 110% 60% at 50% -8%, rgba(0,229,245,.17) 0%, transparent 52%),
    radial-gradient(ellipse  60% 45% at 96% 102%, rgba(245,158,11,.07) 0%, transparent 50%),
    #020508 !important;
  overflow-y: auto !important;
}
.auth-container::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(30deg,  rgba(0,229,245,.04) 12%, transparent 12.5%, transparent 87.5%, rgba(0,229,245,.04) 87.5%),
    linear-gradient(150deg, rgba(0,229,245,.04) 12%, transparent 12.5%, transparent 87.5%, rgba(0,229,245,.04) 87.5%),
    linear-gradient(30deg,  rgba(0,229,245,.04) 12%, transparent 12.5%, transparent 87.5%, rgba(0,229,245,.04) 87.5%),
    linear-gradient(150deg, rgba(0,229,245,.04) 12%, transparent 12.5%, transparent 87.5%, rgba(0,229,245,.04) 87.5%),
    linear-gradient(60deg,  rgba(0,229,245,.055) 25%, transparent 25.5%, transparent 75%, rgba(0,229,245,.055) 75%),
    linear-gradient(60deg,  rgba(0,229,245,.055) 25%, transparent 25.5%, transparent 75%, rgba(0,229,245,.055) 75%);
  background-size:     46px 80px;
  background-position: 0 0, 0 0, 23px 40px, 23px 40px, 0 0, 23px 40px;
  z-index: 0; pointer-events: none; opacity: .75;
}

/* Floating orbs on auth pages */
.dapp-orb { position:absolute; border-radius:50%; filter:blur(70px); pointer-events:none; z-index:0; }
.dapp-orb-1 {
  width:300px; height:300px; top:-60px; left:-80px;
  background:radial-gradient(circle,rgba(34,211,238,.3) 0%,transparent 70%);
  animation:ifp-glow-breathe 6s ease-in-out infinite;
}
.dapp-orb-2 {
  width:260px; height:260px; bottom:80px; right:-60px;
  background:radial-gradient(circle,rgba(99,102,241,.3) 0%,transparent 70%);
  animation:ifp-glow-breathe 6s ease-in-out infinite 3s;
}

/* ─── 3. Glass surface mixin (applied to cards) ──────────────── */
.balance-box,
.investment-box,
.homebtn-box,
.homenxt-box,
.auth-card,
.pkg-card,
.calc-hero,
.swap-hero,
.swap-card,
.statement-hero,
.pkg-hero,
.profile-hero,
.custom-table-main,
.announcement_list,
.friends_list .card,
.info-item,
.referral-code-card,
.calc-card {
  backdrop-filter:blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter:blur(20px) saturate(160%) !important;
}

/* ─── 4. Header ──────────────────────────────────────────────── */
.header-box {
  background: rgba(7,11,20,.82) !important;
  backdrop-filter: blur(32px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(160%) !important;
  border-bottom: 1px solid rgba(255,255,255,.055) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset !important;
  min-height: 64px !important;
  padding: 0 16px !important;
  position:sticky; top:0; z-index:40;
}

/* Wallet chip */
.dapp-wallet-chip {
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.1);
  border-radius:24px;
  text-decoration:none;
  transition:background .18s, border-color .18s, box-shadow .18s;
}
.dapp-wallet-chip:hover {
  background:rgba(34,211,238,.1);
  border-color:rgba(34,211,238,.4);
  box-shadow:0 0 16px -6px rgba(34,211,238,.45);
}
.dapp-wallet-at   { font-size:11px; color:var(--t9-text-muted); font-family:var(--secondary-font); font-weight:600; }
.dapp-wallet-addr { font-family:"JetBrains Mono","Consolas",monospace; font-size:12px; color:#F8FAFC; letter-spacing:.04em; }
.dapp-net-dot {
  display:inline-block; width:7px; height:7px; border-radius:50%; background:#10B981; flex-shrink:0;
  animation:ifp-net-pulse 2.4s ease-in-out infinite;
}

/* Icon buttons */
.t9-iconbtn {
  width:38px !important; height:38px !important;
  border-radius:12px !important;
  background:rgba(255,255,255,.055) !important;
  border:1px solid rgba(255,255,255,.1) !important;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .18s, border-color .18s, box-shadow .18s !important;
}
.t9-iconbtn:hover {
  background:rgba(34,211,238,.1) !important;
  border-color:rgba(34,211,238,.4) !important;
  box-shadow:0 0 14px -5px rgba(34,211,238,.45) !important;
}

/* ─── 5. Native-app Bottom Nav ───────────────────────────────── */
.ifp-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 420px;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 6px env(safe-area-inset-bottom, 0px);
  background: rgba(4,6,14,.96);
  backdrop-filter: blur(48px) saturate(200%);
  -webkit-backdrop-filter: blur(48px) saturate(200%);
  border-top: 1px solid rgba(255,255,255,.1);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 -28px 72px rgba(0,0,0,.7);
  z-index: 200;
}

.ifp-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-decoration: none;
  color: rgba(255,255,255,.3);
  font-family: var(--secondary-font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: color .22s;
  padding: 8px 0 4px;
  position: relative;
}

/* Pill capsule around icon */
.ifp-nav-pill {
  width: 56px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 17px;
  transition:
    background .25s cubic-bezier(.2,.8,.2,1),
    box-shadow .25s;
}

.ifp-nav-icon {
  width: 24px;
  height: 24px;
  display: block;
  /* inactive: white at 35% */
  filter: brightness(0) invert(1) opacity(.35);
  transition: filter .25s, transform .25s cubic-bezier(.2,.8,.2,1);
}

/* ── Active ── */
.ifp-nav-item.active { color: #22D3EE; }

.ifp-nav-item.active .ifp-nav-pill {
  background: rgba(34,211,238,.2);
  box-shadow:
    0 0 0 1px rgba(34,211,238,.28) inset,
    0 0 28px -4px rgba(34,211,238,.7);
}

.ifp-nav-item.active .ifp-nav-icon {
  filter: brightness(0) saturate(100%)
          invert(75%) sepia(60%) saturate(3000%)
          hue-rotate(165deg) brightness(108%) contrast(98%);
  transform: scale(1.12);
}

/* Top accent line — cyan to gold */
.ifp-nav-item.active::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 28px; height: 3px;
  background: linear-gradient(90deg, #00E5F5, #F59E0B);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 2px 14px rgba(0,229,245,.85);
}

.ifp-nav-label { line-height: 1; }

/* Hide old footer-menu */
.footer-menu { display: none !important; }

/* Spacing above nav */
.margin-bottom-100 { margin-bottom: 96px !important; }
.home-container { padding-bottom: 78px; }

/* ─── 6. Auth pages ──────────────────────────────────────────── */
.auth-card {
  background: rgba(2,5,8,.86) !important;
  border: 1px solid rgba(0,229,245,.14) !important;
  border-radius: 24px !important;
  box-shadow:
    0 0 0 1px rgba(245,158,11,.06) inset,
    0 32px 80px -20px rgba(0,0,0,.85),
    0 0 60px -30px rgba(0,229,245,.2) !important;
  position: relative; overflow: hidden;
  animation: ifp-fadeup .45s ease both;
}
/* Cyan → gold two-tone top edge */
.auth-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, #00E5F5 0%, #1D4ED8 50%, #F59E0B 100%);
}

/* Logo float */
.brand-block .cube-img {
  animation: ifp-float 4.5s ease-in-out infinite;
  filter: drop-shadow(0 0 28px rgba(34,211,238,.45));
  max-height: 90px; width:auto;
}
.login-exchangtext {
  font-size: 26px !important;
  font-family: var(--secondary-font) !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, #22D3EE 0%, #3B82F6 55%, #818CF8 100%) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  letter-spacing: -0.3px !important;
}
.login-tagline {
  font-size:13px; color:var(--t9-text-muted); letter-spacing:.02em;
}

/* Connect / primary button — IFP cyan-to-gold */
.connect-btn {
  background: linear-gradient(135deg, #00E5F5 0%, #1D4ED8 55%, #1E3A8A 100%) !important;
  border: none !important;
  border-radius: 16px !important;
  padding: 15px 20px !important;
  font-family: var(--secondary-font) !important;
  font-weight: 800 !important; font-size: 15px !important;
  letter-spacing: .04em !important; color: #fff !important;
  box-shadow:
    0 6px 32px -6px rgba(0,229,245,.5),
    0 2px 8px rgba(0,0,0,.5),
    0 1px 0 rgba(255,255,255,.15) inset !important;
  transition: transform .2s, box-shadow .2s !important;
  position: relative; overflow: hidden;
}
.connect-btn::before {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.2) 0%,transparent 50%);
  pointer-events:none;
}
/* Gold shimmer on far right */
.connect-btn::after {
  content:'';
  position:absolute; top:0; right:0; bottom:0; width:40%;
  background:linear-gradient(135deg,transparent 0%,rgba(245,158,11,.18) 100%);
  pointer-events:none;
}
.connect-btn:hover:not(:disabled) {
  transform:translateY(-2px) !important;
  box-shadow: 0 12px 40px -6px rgba(0,229,245,.65), 0 4px 16px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.15) inset !important;
}
.connect-btn:active:not(:disabled) { transform:translateY(0) !important; }
.connect-btn:disabled { opacity:.5 !important; cursor:not-allowed !important; }

/* Auth link */
.auth-link {
  color:var(--t9-accent) !important;
  font-weight:700 !important;
  text-decoration:none !important;
  border-bottom: 1px solid rgba(34,211,238,.35);
  padding-bottom:1px;
}
.auth-link:hover { border-bottom-color:var(--t9-accent); }

/* Network badge */
.dapp-network-badge {
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 12px;
  background:rgba(16,185,129,.1);
  border:1px solid rgba(16,185,129,.28);
  border-radius:20px;
  font-family:var(--secondary-font); font-size:10px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:#10B981;
}

/* ─── 7. Glass inputs ────────────────────────────────────────── */
.regiinput-mainbox {
  background: rgba(255,255,255,.048) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 14px !important;
  transition: border-color .18s, box-shadow .18s;
}
.regiinput-mainbox:focus-within {
  border-color: rgba(34,211,238,.5) !important;
  box-shadow: 0 0 0 3px rgba(34,211,238,.1), 0 0 20px -6px rgba(34,211,238,.3) !important;
}
.register-input {
  font-size:15px !important; padding:13px 16px !important;
  color:#F8FAFC !important;
}
.register-input::placeholder { opacity:.38 !important; }
.custom_input {
  background:rgba(255,255,255,.048) !important;
  border:1px solid rgba(255,255,255,.1) !important;
  border-radius:12px !important; color:#F8FAFC !important;
  transition:border-color .18s, box-shadow .18s !important;
}
.custom_input:focus {
  border-color:rgba(34,211,238,.5) !important;
  box-shadow:0 0 0 3px rgba(34,211,238,.1) !important;
}

/* Lang select */
.lang-select {
  background:rgba(255,255,255,.055) !important;
  border:1px solid rgba(255,255,255,.1) !important;
  border-radius:20px !important;
  padding:7px 16px !important;
  font-size:12px !important; font-weight:700 !important;
  font-family:var(--secondary-font) !important;
  color:var(--t9-text-muted) !important;
  cursor:pointer;
  transition:border-color .18s, color .18s, background .18s !important;
}
.lang-select:hover {
  border-color:rgba(34,211,238,.4) !important;
  color:#F8FAFC !important;
  background:rgba(34,211,238,.08) !important;
}

/* ─── 8. Sidebar ─────────────────────────────────────────────── */
/* Explicit position:fixed so .home-container > * cannot override it */
.sidebar {
  position: fixed !important;
  top: 0 !important;
  right: -340px !important;
  background: rgba(6,9,18,.96) !important;
  backdrop-filter: blur(32px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(160%) !important;
  border-left: 1px solid rgba(255,255,255,.07) !important;
  box-shadow: -24px 0 80px -20px rgba(0,0,0,.8) !important;
  z-index: 1000 !important;
}
.sidebar.active { right: 0 !important; }

/* Overlay — also protect its position */
.overlay {
  position: fixed !important;
  z-index: 999 !important;
}

/* User card */
.sidebar .card {
  background: rgba(2,5,8,.9) !important;
  border: 1px solid rgba(0,229,245,.14) !important;
  border-radius: 20px !important;
  margin: 16px 12px 8px !important;
  padding: 20px 16px !important;
  position: relative; overflow: hidden;
  box-shadow: 0 8px 32px -10px rgba(0,229,245,.12), 0 0 0 1px rgba(245,158,11,.05) inset !important;
}
.sidebar .card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, #00E5F5 0%, #1D4ED8 50%, #F59E0B 100%);
}

/* Avatar */
.sidebar .avatar {
  width:72px; height:72px;
  border-radius:50% !important;
  box-shadow: 0 0 0 2px rgba(34,211,238,.5), 0 0 24px -4px rgba(34,211,238,.45) !important;
  margin:0 auto 10px !important;
}

/* Sidebar nav links */
.sidebar ul li a {
  border-radius: 12px !important;
  margin: 2px 10px !important;
  padding: 11px 14px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: var(--secondary-font) !important;
  transition: background .18s !important;
}
.sidebar ul li a:hover   { background:rgba(255,255,255,.06) !important; }
.sidebar ul li a.active-item,
.sidebar ul li a.active {
  background: rgba(34,211,238,.09) !important;
  border-left: 2px solid var(--t9-accent) !important;
  color: var(--t9-accent) !important;
}
.sidebar ul li a.active-item img,
.sidebar ul li a.active img {
  filter: brightness(0) saturate(100%) invert(72%) sepia(55%) saturate(2891%) hue-rotate(168deg) brightness(99%) contrast(94%) !important;
}

/* Wallet row */
.dapp-sidebar-wallet {
  display:flex; align-items:center; gap:8px;
  padding:8px 12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09);
  border-radius:10px;
  margin:8px 0 4px;
  cursor:pointer;
  transition:border-color .18s, box-shadow .18s;
}
.dapp-sidebar-wallet:hover {
  border-color:rgba(34,211,238,.4);
  box-shadow:0 0 12px -4px rgba(34,211,238,.3);
}
.dapp-wallet-mono {
  font-family:"JetBrains Mono","Consolas",monospace;
  font-size:11px; color:var(--t9-text-muted);
  flex:1; text-align:left;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Disconnect */
.dapp-disconnect-btn {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:12px 16px;
  background:rgba(239,68,68,.08);
  border:1px solid rgba(239,68,68,.25);
  border-radius:14px;
  color:#EF4444;
  font-size:14px; font-weight:700;
  font-family:var(--secondary-font);
  letter-spacing:.03em; cursor:pointer;
  transition:background .18s, border-color .18s, box-shadow .18s;
}
.dapp-disconnect-btn:hover {
  background:rgba(239,68,68,.15);
  border-color:rgba(239,68,68,.5);
  box-shadow:0 0 20px -8px rgba(239,68,68,.45);
}

/* Sidebar account buttons */
.account-box .regiinput-mainbox {
  border-radius:12px !important;
  font-size:13px !important; font-weight:700 !important;
  font-family:var(--secondary-font) !important;
  justify-content:center !important;
  transition:border-color .18s, background .18s, box-shadow .18s !important;
}
.account-box .regiinput-mainbox:hover {
  border-color:rgba(34,211,238,.4) !important;
  background:rgba(34,211,238,.07) !important;
  box-shadow:0 0 14px -5px rgba(34,211,238,.3) !important;
}

/* ─── 9. Balance box ─────────────────────────────────────────── */
.balance-box {
  background:
    radial-gradient(ellipse 80% 100% at 105% -10%, rgba(245,158,11,.08) 0%, transparent 50%),
    radial-gradient(ellipse 70% 80%  at -5%  80%,  rgba(0,229,245,.07) 0%, transparent 50%),
    rgba(2,5,8,.88) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 20px !important;
  box-shadow:
    0 16px 56px -14px rgba(0,0,0,.5),
    0 4px 16px rgba(0,0,0,.4) !important;
  position: relative; overflow: hidden;
}
.balance-box::before { display: none; }
.balance-value {
  font-size: 44px !important; font-weight: 800 !important;
  font-family: var(--secondary-font) !important;
  letter-spacing: -1.5px !important;
  color: #F8FAFC !important;
}
/* USDT suffix in gold */
.balance-value .unit,
.balance-value + .balance-unit,
.balance-value span:last-child {
  color: var(--ifp-gold) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  vertical-align: middle !important;
}
.balance-label {
  font-size: 10px !important; letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: rgba(0,229,245,.6) !important;
}

/* ─── 10. Investment box ─────────────────────────────────────── */
.investment-box {
  background:
    radial-gradient(ellipse 75% 80% at 110% 50%, rgba(245,158,11,.08) 0%, transparent 55%),
    radial-gradient(ellipse 60% 70% at -10% 50%, rgba(0,229,245,.06) 0%, transparent 55%),
    rgba(2,5,8,.88) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 20px !important;
  box-shadow:
    0 12px 44px -12px rgba(0,0,0,.5),
    0 4px 16px rgba(0,0,0,.4) !important;
  position: relative; overflow: hidden;
}
.investment-box::before { display: none; }
.investment-value {
  font-family: var(--secondary-font) !important;
  font-weight: 800 !important;
  color: var(--ifp-gold) !important;
}

/* ─── 11. Action tiles ───────────────────────────────────────── */
.homebtn-box {
  background: rgba(2,5,8,.75) !important;
  border: 1px solid rgba(0,229,245,.12) !important;
  border-radius: 18px !important;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s, border-color .22s !important;
}
.homebtn-box:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(0,229,245,.4) !important;
  box-shadow: 0 12px 36px -8px rgba(0,229,245,.28) !important;
}
.homebtn-icon {
  background: linear-gradient(135deg, rgba(0,229,245,.15) 0%, rgba(29,78,216,.22) 100%) !important;
  border: 1px solid rgba(0,229,245,.22) !important;
  border-radius: 14px !important;
  width: 46px !important; height: 46px !important;
  transition: box-shadow .22s !important;
}
.homebtn-box:hover .homebtn-icon {
  box-shadow: 0 0 22px -4px rgba(0,229,245,.55) !important;
}

/* ─── 12. IFP token rows ─────────────────────────────────────── */
.homenxt-box {
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 18px !important;
  transition: border-color .18s, box-shadow .18s, transform .18s !important;
}
.homenxt-box:hover {
  border-color: rgba(34,211,238,.35) !important;
  box-shadow: 0 8px 28px -8px rgba(34,211,238,.2) !important;
  transform: translateY(-2px) !important;
}
.homenxt-coin {
  box-shadow: 0 0 14px -2px rgba(34,211,238,.45) !important;
}

/* ─── 13. Package cards ──────────────────────────────────────── */
.pkg-card {
  background: rgba(255,255,255,.038) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 22px !important;
  position:relative; overflow:hidden;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s, border-color .22s !important;
}
.pkg-card::before {
  content:''; position:absolute; top:0; left:10%; right:10%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(34,211,238,.4),rgba(59,130,246,.3),transparent);
}
.pkg-card:hover:not(.is-stopped) {
  transform: translateY(-5px) !important;
  border-color: rgba(34,211,238,.35) !important;
  box-shadow: 0 16px 48px -12px rgba(34,211,238,.28), 0 4px 16px rgba(0,0,0,.35) !important;
}
.roi-pct {
  font-size:38px !important; font-weight:800 !important;
  letter-spacing:-1.5px !important;
  font-family:var(--secondary-font) !important;
  color: var(--ifp-gold) !important;
}
/* Invest / buy button in gold — unmistakably financial */
.pkg-buy-btn {
  border-radius:14px !important; font-weight:800 !important;
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%) !important;
  border: none !important;
  color: #020508 !important;
  box-shadow: 0 6px 24px -6px rgba(245,158,11,.5) !important;
  transition: transform .18s, box-shadow .18s !important;
}
.pkg-buy-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 32px -6px rgba(245,158,11,.65) !important;
}
.investment-btn {
  background: linear-gradient(135deg, #F59E0B, #D97706) !important;
  color: #020508 !important;
  box-shadow: 0 4px 16px -4px rgba(245,158,11,.45) !important;
}

/* Status badges */
.pkg-card-status {
  border-radius: 20px !important; padding: 3px 12px !important;
  font-size:11px !important; font-weight:700 !important;
  font-family:var(--secondary-font) !important; letter-spacing:.05em !important;
}
.pkg-card-status.running {
  background:rgba(16,185,129,.12) !important;
  border:1px solid rgba(16,185,129,.28) !important; color:#10B981 !important;
}
.pkg-card-status.stopped {
  background:rgba(100,116,139,.1) !important;
  border:1px solid rgba(100,116,139,.2) !important; color:var(--t9-text-dim) !important;
}

/* ─── 14. Hero sections (swap / deposit / statement / calc) ──── */
.swap-hero, .pkg-hero, .statement-hero, .calc-hero {
  background:
    radial-gradient(ellipse 80% 100% at 50% 0%, rgba(34,211,238,.1) 0%, transparent 55%),
    rgba(255,255,255,.035) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 22px !important;
}

/* Gradient headings */
.swap-hero-title, .pkg-hero-title, .calc-hero-title, .statement-hero-asset,
.login-exchangtext, .profile-name {
  background: linear-gradient(135deg,#22D3EE 0%,#3B82F6 55%,#818CF8 100%) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
}

/* Back-header title */
.profile-back-title {
  font-family:var(--secondary-font) !important; font-weight:800 !important; font-size:17px !important;
  background:linear-gradient(135deg,#22D3EE,#3B82F6) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
}

/* ─── 15. Statement rows ─────────────────────────────────────── */
.asset-tabs {
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:16px !important; padding:4px !important;
}
.asset-tab.active {
  background:rgba(34,211,238,.14) !important;
  border:1px solid rgba(34,211,238,.3) !important;
  box-shadow:0 2px 12px rgba(34,211,238,.15) !important;
  border-radius:12px !important;
}
.statement-row {
  border:1px solid rgba(255,255,255,.07) !important;
  border-radius:14px !important;
  transition:background .18s, border-color .18s !important;
}
.statement-row:hover {
  background:rgba(34,211,238,.04) !important;
  border-color:rgba(34,211,238,.22) !important;
}
.statement-hero-balance {
  font-size:44px !important; font-weight:800 !important;
  letter-spacing:-1.5px !important; font-family:var(--secondary-font) !important;
  color: var(--ifp-gold) !important;
}

/* ─── 16. Swap card ──────────────────────────────────────────── */
.swap-card {
  background:rgba(255,255,255,.035) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:22px !important;
}
.swap-dir-chip {
  border-radius:12px !important; font-weight:700 !important;
  transition:all .18s !important;
}
.swap-dir-chip.active {
  background:rgba(34,211,238,.15) !important;
  border:1px solid rgba(34,211,238,.38) !important;
  box-shadow:0 0 14px -5px rgba(34,211,238,.38) !important;
}
.swap-amount-input {
  border-radius:14px !important;
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,255,255,.09) !important;
  transition:border-color .18s, box-shadow .18s !important;
}
.swap-amount-input:focus-within {
  border-color:rgba(34,211,238,.5) !important;
  box-shadow:0 0 0 3px rgba(34,211,238,.1) !important;
}
.swap-amount-suffix {
  background:rgba(34,211,238,.18) !important;
  border:1px solid rgba(34,211,238,.3) !important;
  border-radius:10px !important;
  font-weight:700 !important;
  font-family:var(--secondary-font) !important;
  color:var(--t9-accent) !important;
}

/* ─── 17. Calculator pair chips ──────────────────────────────── */
.pair-chip {
  border-radius:12px !important; transition:all .18s !important;
}
.pair-chip.selected, .pair-chip:hover {
  background:rgba(34,211,238,.16) !important;
  border:1px solid rgba(34,211,238,.38) !important;
  box-shadow:0 0 14px -5px rgba(34,211,238,.35) !important;
}
.calc-card {
  background:rgba(255,255,255,.038) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:16px !important;
  transition:transform .18s, box-shadow .18s, border-color .18s !important;
}
.calc-card:hover {
  transform:translateY(-3px) !important;
  border-color:rgba(34,211,238,.3) !important;
  box-shadow:0 10px 30px -8px rgba(34,211,238,.2) !important;
}

/* Centre the wallet chip inside profile-identity */
.profile-identity {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* ─── Profile wallet row ─────────────────────────────────────── */
.profile-wallet-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(96,165,250,.2);
  border-radius: 24px;
  cursor: pointer;
  transition: border-color .2s, background .2s, box-shadow .2s;
  user-select: none;
}
.profile-wallet-row:hover {
  border-color: rgba(34,211,238,.45);
  background: rgba(34,211,238,.08);
  box-shadow: 0 0 18px -6px rgba(34,211,238,.45);
}
.profile-wallet-row.copied {
  border-color: rgba(16,185,129,.5) !important;
  background: rgba(16,185,129,.1) !important;
  box-shadow: 0 0 18px -6px rgba(16,185,129,.4) !important;
}

/* Green live dot */
.profile-wallet-net-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #10B981;
  flex-shrink: 0;
  animation: ifp-net-pulse 2.4s ease-in-out infinite;
}

/* Masked address — monospace, spaced */
.profile-wallet-addr {
  font-family: "JetBrains Mono","Consolas",monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--t9-text);
  letter-spacing: .08em;
  white-space: nowrap;
}

/* Copy icon */
.profile-wallet-copy-icon {
  opacity: .4;
  flex-shrink: 0;
  transition: opacity .18s;
}
.profile-wallet-row:hover .profile-wallet-copy-icon { opacity: .85; }

/* ─── 18. Profile ────────────────────────────────────────────── */
.profile-hero {
  background:
    radial-gradient(ellipse 80% 70% at 50% 0%, rgba(34,211,238,.12) 0%, transparent 55%),
    rgba(255,255,255,.035) !important;
  border:none !important;
}
.profile-avatar {
  box-shadow: 0 0 0 3px rgba(34,211,238,.5), 0 0 36px -6px rgba(34,211,238,.5) !important;
}
.referral-code-card {
  background:rgba(34,211,238,.07) !important;
  border:1px solid rgba(34,211,238,.2) !important;
  border-radius:16px !important;
}
.info-item {
  background:rgba(255,255,255,.035) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:14px !important;
  transition:border-color .18s !important;
}
.info-item:hover { border-color:rgba(34,211,238,.3) !important; }
.profile-stats .stat {
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:14px !important;
}

/* ─── 19. Tables ─────────────────────────────────────────────── */
.custom-table-main {
  background:rgba(255,255,255,.03) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:18px !important; overflow:hidden;
}
.custom-table tbody tr:hover td {
  background:rgba(34,211,238,.04) !important;
}

/* ─── 20. Modals ─────────────────────────────────────────────── */
.customModal1 .modal-content {
  background: rgba(8,12,22,.94) !important;
  backdrop-filter: blur(32px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(160%) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 26px 26px 0 0 !important;
  position:relative; overflow:hidden;
}
.customModal1 .modal-content::before {
  content:''; position:absolute; top:0; left:15%; right:15%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(34,211,238,.55),rgba(59,130,246,.4),transparent);
}
.verifyPassword .modal-content,
.ModalReferral .modal-content {
  background: rgba(8,12,22,.94) !important;
  backdrop-filter: blur(32px) !important;
  -webkit-backdrop-filter: blur(32px) !important;
  border:1px solid rgba(255,255,255,.09) !important;
  border-radius:26px !important;
}
.offcanvas {
  background: rgba(6,9,18,.96) !important;
  backdrop-filter: blur(32px) !important;
  border-left: 1px solid rgba(255,255,255,.07) !important;
}

/* Language option rows */
.language-option {
  border-radius:12px !important;
  transition:background .18s !important;
}
.language-option:hover  { background:rgba(34,211,238,.07) !important; }
.language-option.active { background:rgba(34,211,238,.11) !important; color:var(--t9-accent) !important; }

/* ─── 21. Friends tree ───────────────────────────────────────── */
.friends_list .card {
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,255,255,.09) !important;
  border-radius:16px !important;
  transition:border-color .18s, box-shadow .18s !important;
}
.friends_list .card:hover {
  border-color:rgba(34,211,238,.3) !important;
  box-shadow:0 8px 24px -8px rgba(34,211,238,.2) !important;
}

/* ─── 22. Announcements ──────────────────────────────────────── */
.announcement_list {
  background:rgba(255,255,255,.038) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:14px !important;
  transition:border-color .18s, box-shadow .18s !important;
}
.announcement_list:hover {
  border-color:rgba(34,211,238,.28) !important;
  box-shadow:0 6px 20px -8px rgba(34,211,238,.18) !important;
}

/* ─── 23. Pagination ─────────────────────────────────────────── */
.page-item.active .page-link {
  background:linear-gradient(135deg,#22D3EE,#3B82F6) !important;
  border:none !important;
  box-shadow:0 4px 14px -4px rgba(34,211,238,.5) !important;
}
.page-link {
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,255,255,.09) !important;
  border-radius:10px !important; color:var(--t9-text-muted) !important;
  transition:all .18s !important;
}
.page-link:hover {
  background:rgba(34,211,238,.1) !important;
  border-color:rgba(34,211,238,.32) !important; color:#F8FAFC !important;
}

/* ─── 24. Misc tokens / badges ───────────────────────────────── */
.crypto-ticker {
  border-top:1px solid rgba(255,255,255,.06) !important;
  border-bottom:1px solid rgba(255,255,255,.06) !important;
}
.crypto-ticker-change.up   { background:rgba(16,185,129,.14) !important; color:#10B981 !important; border-radius:5px; padding:1px 6px; }
.crypto-ticker-change.down { background:rgba(239,68,68,.14)  !important; color:#EF4444 !important; border-radius:5px; padding:1px 6px; }

/* Section title decorations */
.section-title::before, .section-title::after {
  background:linear-gradient(90deg,transparent,rgba(34,211,238,.5),rgba(59,130,246,.4),transparent) !important;
}

/* Profile stat icon squares */
.stat-icon-square.cyan   { background:rgba(34,211,238,.12) !important; box-shadow:0 0 16px -5px rgba(34,211,238,.35) !important; }
.stat-icon-square.blue   { background:rgba(59,130,246,.12) !important; box-shadow:0 0 16px -5px rgba(59,130,246,.35) !important; }
.stat-icon-square.purple { background:rgba(99,102,241,.12) !important; box-shadow:0 0 16px -5px rgba(99,102,241,.35) !important; }

/* Live dot */
.live-dot, .crypto-live-dot {
  display:inline-block !important;
  width:7px; height:7px; border-radius:50%; background:#10B981;
  animation:ifp-net-pulse 2.4s ease-in-out infinite !important;
  vertical-align:middle; margin-right:5px;
}

/* Toast */
.jq-toast-wrap .jq-toast-single {
  background:rgba(8,12,22,.95) !important;
  border:1px solid rgba(255,255,255,.1) !important;
  border-radius:16px !important;
  backdrop-filter:blur(20px) !important;
  box-shadow:0 10px 40px -10px rgba(0,0,0,.7) !important;
  font-family:var(--secondary-font) !important;
}

/* Page fade-up */
.home-container > *:not(.sidebar):not(.overlay):not(.ifp-bottom-nav) {
  animation: ifp-fadeup .32s ease both;
}

/* ─── Hard-reset old footer-menu (style.css conflict guard) ──── */
.footer-menu,
.footer-menu .menu-item,
.footer-menu .menu-item.active,
.footer-menu .menu-item.active::before {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}