/* =====================================================
   CRYPTO DASHBOARD DESIGN SYSTEM
   Dark Glass Aqua Architecture
   Enterprise Production Root
===================================================== */

:root {

/* =====================================================
   1. BRAND PRIMITIVES
===================================================== */

--brand-50:  #e6f9ff;
--brand-100: #c9f1ff;
--brand-200: #9fe4ff;
--brand-300: #7fd6ff;
--brand-400: #5cc8ff;
--brand-500: #2a7de1;
--brand-600: #1f6fd1;
--brand-700: #123b6e;

--accent-cyan: #00e5ff;
--accent-mint: #00ffd5;

--danger-300: #ff8aa1;
--danger-500: #ff4d6d;

--warning-500: #ffd27d;
--success-500: #00ffb3;


/* =====================================================
   2. SURFACE SCALE
===================================================== */

--surface-0: #020814;
--surface-1: #071b35;
--surface-2: #0b2348;
--surface-3: #123b6e;
--surface-4: #0f3266;
--surface-5: #7c6533;

--surface-glass-1: rgba(255,255,255,0.04);
--surface-glass-2: rgba(255,255,255,0.08);
--surface-glass-3: rgba(255,255,255,0.14);


/* =====================================================
   3. TEXT SYSTEM
===================================================== */

--text-strong: #ffffff;
--text-primary: #e3f7ff;
--text-secondary: #c9f1ff;
--text-muted: #9fdfff;
--text-soft: #7fbbe0;
--text-disabled: #5f7896;


/* =====================================================
   4. BORDER SYSTEM
===================================================== */

--border-primary: rgba(92,200,255,0.35);
--border-soft: rgba(92,200,255,0.18);
--border-glass: rgba(255,255,255,0.10);
--border-danger: rgba(255,80,80,0.45);


/* =====================================================
   5. ELEVATION SYSTEM
===================================================== */

--elevation-1: 0 6px 18px rgba(0,0,0,0.45);
--elevation-2: 0 18px 40px rgba(0,0,0,0.65);
--elevation-3: 0 25px 70px rgba(0,0,0,0.85);

--glow-primary: 0 0 18px rgba(92,200,255,0.45);
--glow-strong: 0 0 25px rgba(0,200,255,0.55);
--glow-danger: 0 0 18px rgba(255,80,80,0.35);


/* Elevation Intent */
--elevation-card: var(--elevation-2);
--elevation-modal: var(--elevation-3);
--elevation-dropdown: var(--elevation-1);


/* =====================================================
   6. GRADIENT SYSTEM
===================================================== */

--grad-primary: linear-gradient(135deg,#7fd6ff,#2a7de1);
--grad-primary-soft: linear-gradient(135deg,rgba(92,200,255,0.35),rgba(0,180,255,0.18));
--grad-accent: linear-gradient(90deg,#00ffd5,#00b4ff);

--grad-surface-dark: linear-gradient(135deg,#020814,#0b2348);
--grad-surface-elevated: linear-gradient(135deg,#071b35,#123b6e);
--grad-glass-card: linear-gradient(180deg,rgba(18,28,55,0.75),rgba(10,16,35,0.85));

--grad-danger: linear-gradient(135deg,#ff4d6d,#ff8aa1);


/* =====================================================
   7. INTERACTIVE STATES
===================================================== */

--state-hover-overlay: rgba(92,200,255,0.14);
--state-active-overlay: rgba(92,200,255,0.22);
--state-disabled-opacity: 0.55;

--state-live: #55b7ff;
--state-closed: #ff9a9a;
--state-upcoming: #4fd8ff;


/* =====================================================
   8. GLASS SYSTEM
===================================================== */

--glass-blur-light: blur(8px);
--glass-blur-medium: blur(14px);
--glass-blur-heavy: blur(20px);
--glass-shadow:
  0 8px 24px rgba(0,0,0,0.55),
  inset 0 1px 0 rgba(255,255,255,0.05);


/* =====================================================
   9. RADIUS SCALE
===================================================== */

--radius-xs: 6px;
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 18px;
--radius-xl: 22px;
--radius-xxl: 28px;
--radius-pill: 999px;


/* =====================================================
   10. SPACING SCALE
===================================================== */

--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 22px;
--space-6: 32px;
--space-7: 40px;


/* =====================================================
   11. TYPOGRAPHY SCALE
===================================================== */

--font-family-base: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

--font-size-xs: 11px;
--font-size-sm: 12px;
--font-size-md: 14px;
--font-size-lg: 16px;
--font-size-xl: 18px;
--font-size-2xl: 22px;
--font-size-3xl: 28px;

--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-black: 900;

--line-height-tight: 1.1;
--line-height-normal: 1.4;
--line-height-relaxed: 1.6;


/* =====================================================
   12. LAYOUT CONSTRAINTS
===================================================== */

--container-xs: 360px;
--container-sm: 420px;
--container-md: 768px;
--container-lg: 1200px;

--sidebar-width: 280px;
--header-height: 60px;
--bottom-nav-height: 64px;


/* =====================================================
   13. SEMANTIC STATUS SYSTEM
===================================================== */

--status-success-bg: rgba(0,255,179,0.12);
--status-success-border: rgba(0,255,179,0.4);

--status-warning-bg: rgba(255,210,125,0.15);
--status-warning-border: rgba(255,210,125,0.4);

--status-danger-bg: rgba(255,77,109,0.15);
--status-danger-border: rgba(255,77,109,0.45);

--status-info-bg: rgba(92,200,255,0.15);
--status-info-border: rgba(92,200,255,0.45);


/* =====================================================
   14. FORM SYSTEM
===================================================== */

--input-bg: var(--surface-0);
--input-border: var(--border-primary);
--input-border-focus: var(--brand-300);
--input-text: var(--text-primary);
--input-placeholder: var(--text-soft);

--input-radius: var(--radius-md);
--input-padding-y: 12px;
--input-padding-x: 14px;


/* =====================================================
   15. MOTION SYSTEM
===================================================== */

--transition-fast: 0.2s ease;
--transition-normal: 0.3s ease;
--transition-slow: 0.5s ease;

--motion-shimmer-duration: 7s;
--motion-flow-duration: 10s;

--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
--ease-decelerate: cubic-bezier(0.0, 0, 0.2, 1);
--ease-accelerate: cubic-bezier(0.4, 0, 1, 1);

--scale-hover: 1.03;
--scale-active: 0.98;


/* =====================================================
   16. OVERLAY SYSTEM
===================================================== */

--overlay-backdrop-bg: rgba(2,8,20,0.85);
--overlay-blur: blur(6px);


/* =====================================================
   17. FOCUS SYSTEM
===================================================== */

--focus-ring-color: var(--brand-300);
--focus-ring-width: 2px;
--focus-ring-shadow: 0 0 0 2px rgba(127,214,255,0.4);


/* =====================================================
   18. DENSITY SYSTEM
===================================================== */

--density-multiplier: 1;


/* =====================================================
   19. COMPONENT ALIAS TOKENS
===================================================== */

/* Buttons */
--btn-primary-bg: var(--grad-primary);
--btn-primary-text: var(--surface-0);
--btn-primary-radius: var(--radius-md);
--btn-primary-shadow: var(--glow-primary);


--btn-gradient-animated:
    linear-gradient(
      120deg,
      var(--brand-400),
      var(--brand-500),
      var(--brand-300),
      var(--brand-400)
    );

--btn-gradient-size: 300% 300%;

--gold-1: #f6d365;
--gold-2: #f1c40f;
--gold-3: #ffb347;

--gold-gradient: linear-gradient(
    135deg,
    var(--gold-1),
    var(--gold-2),
    var(--gold-3)
  );
--glow-gold:
    0 0 8px rgba(255,200,0,0.6),
    0 0 18px rgba(255,180,0,0.45);

--btn-height-sm: 34px;
--btn-height-md: 42px;
--btn-height-lg: 52px;

--btn-round-sm: 34px;
--btn-round-md: 44px;
--btn-round-lg: 56px;

--btn-padding-x-sm: 14px;
--btn-padding-x-md: 20px;
--btn-padding-x-lg: 26px;

--btn-radius: var(--radius-md);

/* Button transitions */
--btn-transition: var(--transition-normal);

--btn-danger-bg: var(--grad-danger);
--btn-danger-text: #2a000c;

/* Cards */
--card-bg: var(--grad-surface-dark);
--card-border: var(--border-primary);
--card-radius: var(--radius-lg);
--card-shadow: var(--elevation-card);

/* Glass Card */
--glass-card-bg: var(--grad-glass-card);
--glass-card-border: var(--border-glass);
--glass-card-blur: var(--glass-blur-medium);

/* Sidebar */
--sidebar-bg: var(--surface-0);
--sidebar-item-hover: var(--state-hover-overlay);
--sidebar-item-active: var(--state-active-overlay);

/* Progress */
--progress-track-bg: rgba(255,255,255,0.10);
--progress-fill-bg: var(--grad-accent);

/* Badges */
--badge-live-bg: rgba(64,156,255,0.25);
--badge-live-border: rgba(64,156,255,0.6);

--badge-closed-bg: rgba(255,80,80,0.15);
--badge-closed-border: rgba(255,80,80,0.45);

--badge-upcoming-bg: rgba(0,200,255,0.15);
--badge-upcoming-border: rgba(0,200,255,0.45);

/* =====================================================
   SIDEBAR TOKENS
===================================================== */

--sidebar-bg: var(--card-bg);

--sidebar-header-bg: var(--surface-5);

--sidebar-item-bg: var(--surface-glass-1);
--sidebar-item-hover-bg: var(--sidebar-item-hover);
--sidebar-item-active-bg: var(--sidebar-item-active);

--sidebar-item-border: var(--border-soft);
--sidebar-item-border-active: var(--brand-400);

--sidebar-icon-bg: var(--grad-surface-elevated);
--sidebar-icon-color: var(--brand-200);

--sidebar-text-color: var(--text-secondary);
--sidebar-text-active: var(--text-strong);

--sidebar-divider: var(--border-soft);

/* =====================================================
   ICON SYSTEM
===================================================== */

--icon-primary: var(--brand-300);
--icon-secondary: var(--text-muted);
--icon-soft: var(--text-soft);

/* =====================================================
   BOTTOM NAV TOKENS
===================================================== */

--bottom-nav-bg: var(--surface-1);

--bottom-nav-border: var(--border-glass);

--bottom-nav-item-color: var(--text-soft);
--bottom-nav-item-active: var(--brand-400);

--bottom-nav-hover-bg: var(--state-hover-overlay);

--bottom-nav-icon-size: var(--font-size-xl);
--bottom-nav-text-size: var(--font-size-xs);


}
[data-theme="gold-pro"]{

/* =====================================================
   BRAND GOLD SCALE (ANTIQUE METALLIC)
===================================================== */

--brand-50:#fff3c2;
--brand-100:#ffe69a;
--brand-200:#ffd05a;
--brand-300:#e6b93a;

--brand-400:#c99a16;  /* main gold */
--brand-500:#a87900;

--brand-600:#8c6400;
--brand-700:#664700;


/* =====================================================
   GOLD SURFACE SYSTEM (MUCH DARKER)
===================================================== */

/* page background */
--surface-0:#c9ae6a;

/* section background */
--surface-1:#bfa35f;

/* card background */
--surface-2:#d6bc7c;

/* elevated cards */
--surface-3:#e3ca8e;

/* hover cards */
--surface-4:#cfae66;


/* =====================================================
   GLASS SURFACES
===================================================== */

--surface-glass-1:rgba(255,215,120,0.12);
--surface-glass-2:rgba(255,200,80,0.18);
--surface-glass-3:rgba(255,200,80,0.25);


/* =====================================================
   TEXT SYSTEM
===================================================== */

--text-strong:#140e00;
--text-primary:#241700;
--text-secondary:#3b2800;
--text-muted:#5a3e00;
--text-soft:#7a5500;


/* =====================================================
   BORDER SYSTEM
===================================================== */

--border-primary:rgba(150,110,10,0.45);
--border-soft:rgba(150,110,10,0.25);
--border-glass:rgba(255,255,255,0.20);


/* =====================================================
   GOLD GLOW
===================================================== */

--glow-primary:
0 0 10px rgba(201,154,22,0.30);

--glow-strong:
0 0 18px rgba(201,154,22,0.40);


/* =====================================================
   PRIMARY GRADIENT
===================================================== */

--grad-primary:linear-gradient(
135deg,
#ffd86b,
#c99a16,
#8c6400
);

--grad-primary-soft:linear-gradient(
135deg,
rgba(255,214,106,0.25),
rgba(168,121,0,0.15)
);

--grad-accent:linear-gradient(
90deg,
#ffd86b,
#c99a16
);


/* =====================================================
   CARD GRADIENTS
===================================================== */

--grad-surface-dark:linear-gradient(
135deg,
#d6bc7c,
#bfa35f
);

--grad-surface-elevated:linear-gradient(
135deg,
#e3ca8e,
#cfae66
);

--grad-glass-card:linear-gradient(
180deg,
rgba(255,230,170,0.88),
rgba(215,185,110,0.88)
);


/* =====================================================
   PROGRESS SYSTEM
===================================================== */

--progress-fill-bg:linear-gradient(
90deg,
#ffd86b,
#c99a16,
#8c6400
);


/* =====================================================
   STATUS SYSTEM
===================================================== */

--status-success-bg:rgba(255,200,80,0.20);
--status-success-border:rgba(168,121,0,0.45);

--status-warning-bg:rgba(255,200,80,0.22);
--status-warning-border:rgba(168,121,0,0.50);

--status-info-bg:rgba(255,200,80,0.18);
--status-info-border:rgba(168,121,0,0.45);


/* =====================================================
   BUTTON SYSTEM
===================================================== */

--btn-primary-bg:var(--grad-primary);

--btn-primary-text:#1c1200;

--btn-primary-shadow:
0 6px 16px rgba(120,80,0,0.35);


/* =====================================================
   CARD SYSTEM
===================================================== */

--card-bg:var(--grad-surface-dark);

--card-border:rgba(150,110,10,0.35);

--card-shadow:
0 14px 30px rgba(100,70,0,0.25),
0 6px 12px rgba(0,0,0,0.12);


/* =====================================================
   ICON CONTRAST
===================================================== */

--sidebar-icon-color:#4a3200;

--icon-primary:#4a3200;
--icon-secondary:#6a4a00;

--crypto-icon:#4a3200;

}

[data-theme="gold-prox"] {

/* =====================================================
   1. BRAND PRIMITIVES
===================================================== */

--brand-50:  #fff8e6;
--brand-100: #ffe7a3;
--brand-200: #ffd86b;
--brand-300: #f5c84b;
--brand-400: #e6b93a;
--brand-500: #d4af37;   /* premium gold */
--brand-600: #b89628;
--brand-700: #8c6f16;
--brand-800: #5c480d;

--accent-cyan: #ffd86b;
--accent-mint: #ffe7a3;

--danger-300: #ff9a9a;
--danger-500: #ff4d6d;

--warning-500: #ffd86b;
--success-500: #e6b93a;


/* =====================================================
   2. SURFACE SCALE
===================================================== */

--surface-0: #030303;
--surface-1: #080808;
--surface-2: #0e0e0e;
--surface-3: #141414;
--surface-4: #1b1b1b;

--surface-glass-1: rgba(255,255,255,0.02);
--surface-glass-2: rgba(255,255,255,0.05);
--surface-glass-3: rgba(255,255,255,0.08);


/* =====================================================
   3. TEXT SYSTEM
===================================================== */

--text-strong: #ffffff;
--text-primary: #fff4cc;     /* champagne */
--text-secondary: #ffd86b;
--text-muted: #c9a652;
--text-soft: #9c7d38;
--text-disabled: #5c4a20;


/* =====================================================
   4. BORDER SYSTEM
===================================================== */

--border-primary: rgba(212,175,55,0.55);
--border-soft: rgba(212,175,55,0.25);
--border-glass: rgba(255,255,255,0.08);
--border-danger: rgba(255,80,80,0.45);


/* =====================================================
   5. ELEVATION SYSTEM
===================================================== */

--glow-primary: 0 0 18px rgba(212,175,55,0.35);
--glow-strong: 0 0 32px rgba(212,175,55,0.55);
--glow-danger: 0 0 18px rgba(255,80,80,0.35);


/* =====================================================
   6. GRADIENT SYSTEM
===================================================== */

--grad-primary: linear-gradient(
  135deg,
  #ffd86b,
  #d4af37,
  #8c6f16
);

--grad-primary-soft: linear-gradient(
  135deg,
  rgba(255,216,107,0.30),
  rgba(212,175,55,0.15)
);

--grad-accent: linear-gradient(
  90deg,
  #ffe7a3,
  #d4af37
);

--grad-surface-dark: linear-gradient(
  135deg,
  #020202,
  #101010
);

--grad-surface-elevated: linear-gradient(
  135deg,
  #0a0a0a,
  #1a1a1a
);

--grad-glass-card: linear-gradient(
  180deg,
  rgba(30,30,30,0.90),
  rgba(10,10,10,0.95)
);

--grad-danger: linear-gradient(
  135deg,
  #ff4d6d,
  #ff8aa1
);


/* =====================================================
   7. INTERACTIVE STATES
===================================================== */

--state-hover-overlay: rgba(255,216,107,0.12);
--state-active-overlay: rgba(255,216,107,0.22);

--state-live: #ffd86b;
--state-closed: #ff9a9a;
--state-upcoming: #ffe7a3;


/* =====================================================
   8. SEMANTIC STATUS SYSTEM
===================================================== */

--status-success-bg: rgba(212,175,55,0.14);
--status-success-border: rgba(212,175,55,0.50);

--status-warning-bg: rgba(255,216,107,0.14);
--status-warning-border: rgba(255,216,107,0.50);

--status-info-bg: rgba(212,175,55,0.14);
--status-info-border: rgba(212,175,55,0.50);


/* =====================================================
   9. PROGRESS SYSTEM
===================================================== */

--progress-track-bg: rgba(255,255,255,0.08);

--progress-fill-bg: linear-gradient(
  90deg,
  #ffd86b,
  #d4af37,
  #8c6f16
);


/* =====================================================
   10. BUTTON ALIASES
===================================================== */

--btn-primary-bg: var(--grad-primary);
--btn-primary-text: #000000;
--btn-primary-shadow: var(--glow-primary);

--btn-danger-bg: var(--grad-danger);
--btn-danger-text: #2a000c;


/* =====================================================
   11. CARD ALIASES
===================================================== */

--card-bg: var(--grad-surface-dark);
--card-border: rgba(212,175,55,0.45);
--card-shadow: 0 25px 60px rgba(0,0,0,0.9);

}


.appBody {
    background: var(--surface-2);
    color: var(--text-primary);
	font-family: var(--font-family-base);
	padding-bottom: calc(var(--bottom-nav-height) + var(--space-3));
}


.appHeader {
    background: var(--surface-5);
    border-bottom: 1px solid var(--border-primary);
   
}

/* =====================================================
   FLOATING GLASS BOTTOM NAV (NO BLEED + THEMED)
===================================================== */

.appBottomMenu {
    position: fixed;
    z-index: 1000;

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

    height: var(--bottom-nav-height);
    padding: var(--space-2) 0;
    overflow: hidden; /* FIXES RADIUS BLEED */

    background: var(--surface-5);

    border: 1px solid var(--border-glass);

}

/* Soft inner frost layer */
.appBottomMenu::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;

    background: var(--surface-5);

    pointer-events: none;
}
/* =====================================================
   CLEAN PREMIUM NAV ITEM (CSS ONLY)
===================================================== */

.appBottomMenu .item {
    position: relative;

    flex: 1;
    text-align: center;

    padding: var(--space-2) 0;

    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);

    color: var(--text-primary);

    transition:
        color var(--transition-fast),
        transform var(--transition-fast);
}

/* ICON */

.appBottomMenu .item ion-icon {
    font-size: var(--font-size-xl);
    display: block;
    margin-bottom: var(--space-1);

    transition:
        transform var(--transition-fast),
        text-shadow var(--transition-fast),
        color var(--transition-fast);
}

/* Hover (desktop only effect) */

@media (hover: hover) {
  .appBottomMenu .item:hover {
      color: var(--text-primary);
  }

  .appBottomMenu .item:hover ion-icon {
      transform: translateY(-2px);
  }
}

/* Active State */

.appBottomMenu .item.active {
    color: var(--brand-400);
}

/* Subtle icon emphasis */

.appBottomMenu .item.active ion-icon {
    transform: translateY(-2px);
    text-shadow: var(--glow-primary);
}

/* Soft capsule background */

.appBottomMenu .item.active::before {
    content: "";
    position: absolute;
    inset: 6px 18% 6px 18%;

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

    background: var(--state-hover-overlay);

    z-index: -1;
}

/* Press feedback */

.appBottomMenu .item:active {
    transform: scale(var(--scale-active));
}
/* =====================================================
   COUNTDOWN CARD
===================================================== */

.countdown-card {
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-1);
  background: var(--surface-2);
  max-width: var(--container-sm);
  margin: calc(var(--space-5) * var(--density-multiplier)) auto;
  padding: var(--space-4);
}

.countdown-card h4 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-strong);
}

.countdown-card small {
  font-size: var(--font-size-sm);
  color: var(--text-soft);
}
/* =====================================================
   ENTERPRISE CRYPTO CARD ENGINE
===================================================== */

.crypto-card {
  position: relative;
  display: flex;
  flex-direction: column;

  border-radius: var(--radius-xl);
  padding: calc(var(--space-4) * var(--density-multiplier));

  background: var(--surface-3);
  backdrop-filter: var(--glass-blur-medium);
  -webkit-backdrop-filter: var(--glass-blur-medium);

  border: 2px solid var(--border-glass);

  box-shadow:
    var(--elevation-1),
    var(--glow-primary);

  transition: var(--transition-normal);
  overflow: hidden;
}

.crypto-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;

  background: linear-gradient(
    140deg,
    rgba(255,255,255,0.08),
    transparent 45%
  );

  pointer-events: none;
  opacity: .6;
}
.crypto-card-xs { padding: var(--space-2); }
.crypto-card-sm { padding: var(--space-3); }
.crypto-card-md { padding: var(--space-4); }
.crypto-card-lg { padding: var(--space-5); border-radius: var(--radius-xxl); }
.crypto-card-xl { padding: calc(var(--space-6) * 1.4); border-radius: var(--radius-xxl); }

.crypto-card-full { width: 100%; }
.crypto-card-solid {
  background: var(--surface-2);
  backdrop-filter: none;
}

.crypto-card-elevated {
  background: var(--grad-surface-elevated);
}

.crypto-card-glass {
  background: var(--glass-card-bg);
  border: 1px solid var(--glass-card-border);
}

.crypto-card-outline {
  background: transparent;
  border: 1px solid var(--border-soft);
}

.crypto-card-feature {
  border: 1px solid var(--brand-400);
  box-shadow:
    var(--elevation-1),
    var(--glow-primary);
}
.crypto-card-interactive {
  cursor: pointer;
}

.crypto-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);

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

.crypto-card-body {
  flex: 1;
}

.crypto-card-footer {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-soft);
}
.crypto-card-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.crypto-card-subtitle {
  font-size: var(--font-size-xs);
  color: var(--text-soft);
}

.crypto-card-value {
  font-size: clamp(14px, 4vw, 20px);
  font-weight: var(--font-weight-bold);
  letter-spacing: .8px;
  color: var(--text-strong);
}

.crypto-card-meta {
  font-size: var(--font-size-xs);
  color: var(--text-soft);
}
.crypto-card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);

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

  background: linear-gradient(
    145deg,
    var(--surface-3),
    var(--surface-1)
  );
  border: 1px solid var(--border-primary);
}

.crypto-card-icon i,
.crypto-card-icon ion-icon {
  font-size: var(--font-size-xl);
  color: var(--icon-primary);
}
/* =====================================================
   STABLE GRID ENGINE (NO COLLAPSING)
===================================================== */

.crypto-card-grid {
  display: grid;
  gap: var(--space-4);
}

.crypto-card-grid-1 {
  grid-template-columns: 1fr;
}

.crypto-card-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.crypto-card-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.crypto-card-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.crypto-card-grid-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* Responsive scaling ONLY for higher grids */

@media (max-width: 1024px) {
  .crypto-card-grid-4,
  .crypto-card-grid-5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .crypto-card-grid-3,
  .crypto-card-grid-4,
  .crypto-card-grid-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* =====================================================
   QUICK ACTION GRID (ALWAYS 4, RESPONSIVE SAFE)
===================================================== */

.crypto-action-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}
/* =====================================================
   PREMIUM DEPTH QUICK CARD (NO BORDER)
===================================================== */

.crypto-card-quick {
  position: relative;

  align-items: center;
  justify-content: center;
  text-align: center;

  padding: var(--space-4);
  min-height: 110px;
  gap: var(--space-3);

  border: none;
  transition: var(--transition-normal);
}

/* Soft edge highlight */
.crypto-card-quick::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;

  background: linear-gradient(
    140deg,
    rgba(255,255,255,0.06),
    transparent 50%
  );

  pointer-events: none;
}

/* Remove inner icon box */
.crypto-card-quick .crypto-card-icon {
  background: transparent;
  border: none;
  box-shadow: none;
  width: auto;
  height: auto;
}

/* Icon */
.crypto-card-quick .crypto-card-icon i {
  font-size: 26px;
  color: var(--icon-primary);
  text-shadow: var(--glow-primary);
}

/* Label */
.crypto-card-quick-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: .5px;
  color: var(--text-secondary);
}

/* Hover depth lift */
.crypto-card-interactive:hover {
  transform: translateY(-6px);
  box-shadow:
    0 5px 10px rgba(0,0,0,0.8),
    0 5px 10px rgba(0,0,0,0.9);
}


.crypto-card-quick-disabled {
  opacity: var(--state-disabled-opacity);
  border: 1px solid var(--status-danger-border);
  background: var(--status-danger-bg);
}

.crypto-card-quick-disabled .crypto-card-icon {
  box-shadow: none;
}


@media (max-width: 640px) {

  .crypto-card-quick {
    padding: var(--space-3);
    min-height: 88px;
    gap: var(--space-2);
  }

  .crypto-card-quick .crypto-card-icon i {
    font-size: 20px;
  }

  .crypto-card-quick-label {
    font-size: var(--font-size-xs);
  }

}
.crypto-badge-live {
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: .5px;

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

  background: var(--status-info-bg);
  border: 1px solid var(--status-info-border);
}


/* ==========================================
   CRYPTO BADGE SYSTEM
========================================== */

.crypto-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);

  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: .4px;

  border: 1px solid transparent;
}

/* Flexible */
.crypto-badge-flexible {
  background: var(--status-info-bg);
  border-color: var(--status-info-border);
}

/* Term */
.crypto-badge-term {
  background: var(--badge-upcoming-bg);
  border-color: var(--badge-upcoming-border);
}

/* Recommended */
.crypto-badge-recommended {
  background: var(--status-success-bg);
  border-color: var(--status-success-border);
}

/* Danger / High Risk */
.crypto-badge-danger {
  background: var(--status-danger-bg);
  border-color: var(--status-danger-border);
}

/* ==========================================
   STAKING NFT THUMB
========================================== */

.stake-nft-thumb {
  width: 48px;
  height: 48px;

  border-radius: var(--radius-md);
  overflow: hidden;

  border: 1px solid var(--border-primary);
  background: var(--surface-2);

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

  box-shadow: var(--elevation-1);

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

.stake-nft-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stake-nft-thumb:hover {
  transform: translateY(-2px);
  box-shadow: var(--elevation-2);
}

.stake-nft-thumb.feature {
  border: 1px solid var(--brand-400);
  box-shadow: var(--glow-primary);
}
/* ==========================================
   NFT PREVIEW MODAL (TOKENIZED)
========================================== */

.nft-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;

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

  background: var(--overlay-backdrop-bg);
  backdrop-filter: var(--overlay-blur);

  opacity: 0;
  visibility: hidden;

  transition: var(--transition-normal);
}

.nft-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.nft-modal-content {
  max-width: 420px;
  width: 90%;

  border-radius: var(--radius-xl);
  overflow: hidden;

  background: var(--grad-glass-card);
  border: 1px solid var(--border-glass);

  box-shadow: var(--elevation-modal);

  transform: scale(.95);
  transition: var(--transition-normal);
}

.nft-modal-overlay.active .nft-modal-content {
  transform: scale(1);
}

.nft-modal-content img {
  width: 100%;
  display: block;
}

.nft-modal-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);

  width: 36px;
  height: 36px;

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

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

  background: var(--surface-3);
  border: 1px solid var(--border-primary);

  cursor: pointer;
  transition: var(--transition-fast);
}

.nft-modal-close:hover {
  background: var(--surface-4);
  box-shadow: var(--glow-primary);
}

/* =====================================================
   CRYPTO SMALL TITLE ICON
===================================================== */

.crypto-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}


.crypto-title-icon {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  text-shadow: none;
}

/* =====================================================
   DASHBOARD SECTION SYSTEM (TRUE COMPACT)
===================================================== */

.section {
  padding-left: calc(var(--space-4) * var(--density-multiplier));
  padding-right: calc(var(--space-4) * var(--density-multiplier));
  padding-top: calc(var(--space-3) * var(--density-multiplier));
  padding-bottom: calc(var(--space-3) * var(--density-multiplier));
}

/* Only one vertical rhythm controller */
.section + .section {
  margin-top: calc(var(--space-3) * var(--density-multiplier));
}

/* Major sections slightly stronger */
.section-major + .section-major {
  margin-top: calc(var(--space-4) * var(--density-multiplier));
}
/* =====================================================
   CRYPTO DASHBOARD HEADER
===================================================== */

.crypto-dashboard-header {
  margin-bottom: calc(var(--space-3) * var(--density-multiplier));
}

.crypto-dashboard-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--text-strong);
  letter-spacing: .6px;
}

.crypto-dashboard-subtitle {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  margin-top: var(--space-1);
}
.crypto-card-grid + .crypto-card-grid {
  margin-top: calc(var(--space-3) * var(--density-multiplier));
}


.crypto-card-banner {
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-xl);
}

.crypto-banner-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: inherit;
}

/* Optional soft depth */

.crypto-card-banner {
  box-shadow:
    0 10px 30px rgba(0,0,0,0.6);
}
/* =====================================================
   GLASS INPUT SYSTEM (REUSABLE + ICON SUPPORT)
===================================================== */

/* Wrapper (optional, only needed when icon is used) */
.input-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: var(--space-3);
}

/* Base Input */

.form-control {
    width: 100%;

    padding: var(--input-padding-y) var(--input-padding-x);
    border-radius: var(--input-radius);

    font-family: var(--font-family-base);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);

    color: var(--text-strong);

    border: 1px solid var(--input-border);

    box-shadow:
        inset 0 1px 1px rgba(0,0,0,0.25);

    caret-color: var(--brand-400);

    transition:
        border var(--transition-fast),
        box-shadow var(--transition-fast),
        background var(--transition-fast),
        color var(--transition-fast);
}

/* Focus (brighter, not darker) */

.form-control:focus {
    outline: none;

    border: 1px solid var(--input-border-focus);

   

    box-shadow:
        0 0 0 2px rgba(127,214,255,0.25),
        0 0 12px rgba(92,200,255,0.25);

    color: var(--text-strong);
}

/* Placeholder */

.form-control::placeholder {
    color: var(--text-soft);
    opacity: 0.6;
}

/* Disabled */

.form-control:disabled {
    opacity: var(--state-disabled-opacity);
    cursor: not-allowed;
}

select.form-control {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    padding-right: 40px;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23cfd3c6' viewBox='0 0 20 20'%3E%3Cpath d='M5 7l5 5 5-5z'/%3E%3C/svg%3E");

    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;

    cursor: pointer;
}

/* Dark dropdown text (important) */

select.form-control option {
    background: #0f1117;
    color: #e6edf3;
}

/* =====================================================
   ICON SUPPORT
===================================================== */

/* When icon exists, add space */
.input-wrapper.has-icon .form-control {
    padding-left: 44px;
}

/* Icon style */

.input-wrapper .input-icon {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);

    font-size: var(--font-size-md);
    color: var(--text-soft);

    pointer-events: none;

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

/* Icon highlight on focus */

.input-wrapper:focus-within .input-icon {
    color: var(--brand-400);
    text-shadow: var(--glow-primary);
}

/* ==========================================
   STAKE INPUT GROUP
========================================== */

.crypto-input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.form-control.has-right-button {
  padding-right: 90px; /* space for MAX */
}

.input-inline-btn {
  position: absolute;
  right: 8px;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-md);
  background: var(--surface-5);
  border: 1px solid var(--border-primary);
  color: var(--brand-300);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
}

.input-inline-btn:hover {
  background: var(--brand-500);
  color: #000;
  box-shadow: var(--glow-primary);
}

/* =====================================================
   ENTERPRISE BUTTON SYSTEM (REFINED)
===================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);

  border-radius: var(--btn-radius);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);

  cursor: pointer;
  user-select: none;

  border: 1px solid transparent;
  text-decoration: none;

  transition:
    transform var(--btn-transition),
    box-shadow var(--btn-transition),
    background var(--btn-transition),
    color var(--btn-transition),
    border var(--btn-transition);
}

.btn:active {
  transform: scale(var(--scale-active));
}

.btn:disabled {
  opacity: var(--state-disabled-opacity);
  cursor: not-allowed;
  transform: none;
}

/* ================= SIZE ================= */

.btn-sm {
  height: var(--btn-height-sm);
  padding: 0 var(--btn-padding-x-sm);
  font-size: var(--font-size-xs);
}

.btn-md {
  height: var(--btn-height-md);
  padding: 0 var(--btn-padding-x-md);
}

.btn-lg {
  height: var(--btn-height-lg);
  padding: 0 var(--btn-padding-x-lg);
  font-size: var(--font-size-md);
}

/* ================= PRIMARY ================= */

.btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  box-shadow: var(--btn-primary-shadow);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    var(--btn-primary-shadow),
    0 8px 20px rgba(0,0,0,0.6);
}

/* ================= ANIMATED PRIMARY ================= */

.btn-primary-animated {
  background: var(--btn-gradient-animated);
  background-size: var(--btn-gradient-size);
  color: #fff;
  box-shadow: var(--glow-primary);
  animation: gradientShift 6s ease infinite;
  color:#000000;
}

.btn-primary-animated:hover {
  transform: translateY(-3px);
  box-shadow:
    var(--glow-primary),
    0 12px 28px rgba(0,0,0,0.7);
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ================= GOLD CTA ================= */

.btn-gold {
  background: var(--gold-gradient);
  color: #1a1a1a;
  border: 1px solid rgba(255,215,0,0.6);
  box-shadow: var(--glow-gold);
  font-weight: var(--font-weight-bold);
  letter-spacing: .5px;
}

.btn-gold:hover {
  transform: translateY(-3px);
  box-shadow:
    var(--glow-gold),
    0 14px 30px rgba(0,0,0,0.6);
}

/* ================= GLASS ================= */

.btn-glass {
  background: var(--surface-glass-2);
  backdrop-filter: var(--glass-blur-medium);
  -webkit-backdrop-filter: var(--glass-blur-medium);
  border: 1px solid var(--border-glass);
  color: var(--text-primary);
  box-shadow: inset 0 1px 0 var(--surface-glass-3);
}

.btn-glass:hover {
  background: var(--surface-glass-3);
}

/* ================= OUTLINE ================= */

.btn-outline {
  background: transparent;
  border: 1px solid var(--brand-400);
  color: var(--brand-400);
}

.btn-outline:hover {
  background: var(--state-hover-overlay);
  box-shadow: var(--glow-primary);
}

/* ================= GHOST ================= */

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
}

.btn-ghost:hover {
  background: var(--state-hover-overlay);
  color: var(--text-primary);
}

/* ================= SEMANTIC ================= */

.btn-success {
  background: var(--status-success-bg);
  border: 1px solid var(--status-success-border);
  color: var(--status-success-text);
}

.btn-danger {
  background: var(--status-danger-bg);
  border: 1px solid var(--status-danger-border);
  color: var(--status-danger-text);
}

.btn-warning {
  background: var(--status-warning-bg);
  border: 1px solid var(--status-warning-border);
  color: var(--status-warning-text);
}

.w-100 { width: 100%; }

/* =====================================================
   ROUND ICON BUTTONS
===================================================== */

.btn-round {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
  padding: 0;

  border: 1px solid var(--border-primary);
  background: var(--surface-2);
  color: var(--text-primary);

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

.btn-round-sm { width: var(--btn-round-sm); height: var(--btn-round-sm); }
.btn-round-md { width: var(--btn-round-md); height: var(--btn-round-md); }
.btn-round-lg { width: var(--btn-round-lg); height: var(--btn-round-lg); }

.btn-round:hover {
  background: var(--surface-3);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.6);
}

.btn-round-primary {
  background: var(--grad-accent);
  border: none;
  color: #fff;
  box-shadow: var(--glow-primary);
}

.btn-round-gold {
  background: var(--gold-gradient);
  border: none;
  color: #1a1a1a;
  box-shadow: var(--glow-gold);
}


/* =====================================================
   TOKENIZED LIST VIEW SYSTEM
===================================================== */

.crypto-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);

  padding: 0;
  margin: 0;
  list-style: none;
}

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

  padding: var(--space-3);
  border-radius: var(--radius-lg);

  background: var(--grad-glass-card);
  backdrop-filter: var(--glass-blur-medium);
  -webkit-backdrop-filter: var(--glass-blur-medium);

  border: 1px solid var(--border-glass);

  box-shadow:
    var(--elevation-1),
    inset 0 0 0 1px rgba(255,255,255,0.04);

  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    background var(--transition-fast);
}
.crypto-list-item-interactive {
  cursor: pointer;
}

.crypto-list-item-interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--elevation-2);
}
.crypto-list-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.crypto-list-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    145deg,
    var(--surface-3),
    var(--surface-1)
  );

  border: 1px solid var(--border-primary);
}

.crypto-list-icon i,
.crypto-list-icon ion-icon {
  font-size: var(--font-size-md);
  color: var(--icon-primary);
}
.crypto-list-content {
  display: flex;
  flex-direction: column;
}

.crypto-list-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.crypto-list-subtitle {
  font-size: var(--font-size-xs);
  color: var(--text-soft);
}
.crypto-list-right {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
}
.crypto-list-compact .crypto-list-item {
  padding: var(--space-2);
  border-radius: var(--radius-md);
}

.crypto-list-compact .crypto-list-icon {
  width: 34px;
  height: 34px;
}
/* ==========================================
   LIST NAVIGATION SUPPORT
========================================== */

.crypto-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* Right wrapper now supports stacking */
.crypto-list-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Chevron / redirect icon */
.crypto-list-arrow {
  font-size: var(--font-size-md);
  color: var(--text-muted);
  transition: var(--transition-fast);
}

/* Interactive variant */
.crypto-list-item-interactive {
  cursor: pointer;
}

.crypto-list-item-interactive:hover .crypto-list-arrow {
  transform: translateX(3px);
  color: var(--brand-400);
}
.crypto-list-link {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  color: inherit;
}

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-center { align-items: center; }
.flex-between { justify-content: space-between; }
.flex-gap-2 { gap: var(--space-2); }
.flex-gap-3 { gap: var(--space-3); }
.flex-gap-4 { gap: var(--space-4); }


.text-center { text-align: center; }


.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }


/* ==========================================
   BASE PANEL
========================================== */

.panel {
  position: relative;

  border-radius: var(--radius-xl);
  padding: calc(var(--space-5) * var(--density-multiplier));

  transition:
    background var(--transition-normal),
    border var(--transition-normal),
    box-shadow var(--transition-normal),
    transform var(--transition-fast);

  overflow: hidden;
}

/* Optional hover lift */
.panel-interactive:hover {
  transform: translateY(-4px);
  box-shadow: var(--elevation-3);
}


/* ==========================================
   SURFACE MODIFIERS
========================================== */

.panel-surface-elevated {
  background: var(--grad-surface-elevated);
  border: 1px solid var(--border-primary);
  box-shadow: var(--elevation-2);
}

.panel-surface-glass {
  background: var(--grad-glass-card);
  border: 1px solid var(--border-glass);
  backdrop-filter: var(--glass-blur-medium);
  -webkit-backdrop-filter: var(--glass-blur-medium);
}

.panel-surface-solid {
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
}


/* ==========================================
   INTENT MODIFIERS
========================================== */

.panel-feature {
  border: 1px solid var(--brand-400);
  box-shadow:
    var(--elevation-2),
    var(--glow-primary);
}

.panel-danger {
  border: 1px solid var(--status-danger-border);
  background: var(--status-danger-bg);
}

.panel-success {
  border: 1px solid var(--status-success-border);
  background: var(--status-success-bg);
}
.text-danger-token {
  color: var(--danger-500);
  font-weight: var(--font-weight-semibold);
}
/* ==========================================
   CRYPTO PROGRESS BAR
========================================== */

.crypto-progress{
height:6px;
border-radius:var(--radius-pill);
background:var(--progress-track-bg);
overflow:hidden;
}

.crypto-progress-bar{
height:100%;
background:var(--progress-fill-bg);
transition:width var(--transition-normal);
}
/* =====================================================
   PROFILE AVATAR SYSTEM
===================================================== */

.crypto-avatar-wrapper{
position:relative;
display:inline-block;
cursor:pointer;
}

.crypto-avatar-img{
width:140px;
height:140px;
border-radius:50%;
object-fit:cover;

border:2px solid var(--border-glass);

box-shadow:
0 0 12px rgba(92,200,255,0.25);
}

.crypto-avatar-edit{
position:absolute;
bottom:6px;
right:6px;

width:36px;
height:36px;

border-radius:50%;

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

background:var(--brand-500);
color:#fff;

box-shadow:0 0 8px rgba(92,200,255,0.35);
}

.crypto-avatar-edit ion-icon{
font-size:18px;
}
/* =====================================================
   CRYPTO SUPPORT CHAT SYSTEM
   Dark Glass Aqua Compatible
===================================================== */

/* Chat Container */

.crypto-chat-box{
height:380px;
overflow-y:auto;
padding:12px;
border-radius:var(--radius-md);
background:linear-gradient(
145deg,
var(--surface-1),
var(--surface-2)
);
border:1px solid var(--border-glass);
margin-bottom:12px;
scroll-behavior:smooth;
}

/* Scrollbar */

.crypto-chat-box::-webkit-scrollbar{
width:6px;
}

.crypto-chat-box::-webkit-scrollbar-thumb{
background:var(--surface-3);
border-radius:10px;
}

.crypto-chat-box::-webkit-scrollbar-thumb:hover{
background:var(--brand-500);
}

/* Chat Rows */

.crypto-chat-row{
display:flex;
margin-bottom:10px;
}

.crypto-chat-row.user{
justify-content:flex-end;
}

.crypto-chat-row.admin{
justify-content:flex-start;
}


.chat-bubble{

padding:10px 14px;

border-radius:16px;

max-width:75%;

word-break:break-word;

font-size:13px;

line-height:1.45;

backdrop-filter:blur(6px);

border:1px solid var(--border-glass);

box-shadow:var(--glass-shadow);

}

/* User Bubble */

.user-bubble{

margin-left:auto;

background:linear-gradient(
145deg,
rgba(92,200,255,0.28),
rgba(92,200,255,0.12)
);

color:var(--text-strong);

border-top-right-radius:4px;

}

/* Admin Bubble */

.admin-bubble{

margin-right:auto;

background:linear-gradient(
145deg,
rgba(255,255,255,0.06),
rgba(255,255,255,0.02)
);

color:var(--text-strong);

border-top-left-radius:4px;

}


.chat-time{

font-size:10px;

margin-top:4px;

opacity:.65;

text-align:right;

}

/* Message Status */

.tick-single,
.tick-double{

font-size:12px;

margin-left:4px;

opacity:.7;

}

/* Read Tick */

.tick-double{
color:var(--brand-400);
}


.crypto-chat-form{
display:flex;
gap:10px;
align-items:center;
}

.crypto-chat-send{
display:flex;
align-items:center;
justify-content:center;
padding:10px 16px;
}

/* Input Placeholder */

#chat_message::placeholder{
color:var(--text-soft);
opacity:.6;
}


.crypto-chat-empty{
text-align:center;
padding:30px 10px;
opacity:.6;
font-size:13px;
}


@media (max-width:480px){

.chat-bubble{
max-width:85%;
font-size:12px;
}

.crypto-chat-box{
height:350px;
}

}

.crypto-chat-date{

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

margin:18px 0;

font-size:11px;
color:var(--text-soft);

opacity:.7;

}

.crypto-chat-date::before,
.crypto-chat-date::after{

content:"";

flex:1;

border-bottom:1px solid var(--border-glass);

margin:0 10px;

}

.crypto-chat-date span{

padding:2px 8px;

font-weight:500;

letter-spacing:.3px;

color:var(--text-soft);

}


.gauge-container {
  width: 200px;
  height: 200px;
  margin: auto;
}

.gauge-value {
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--brand-700);
}



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

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

  margin-top: var(--space-4);
  padding: var(--space-3) 0;

  font-weight: var(--font-weight-black);
  font-size: var(--font-size-md);

  border-radius: var(--btn-primary-radius);
  border: none;

  color: var(--btn-primary-text);
  background: var(--btn-primary-bg);

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

  box-shadow: var(--btn-primary-shadow);
  transition: var(--transition-normal);
}

.buy-btn:hover {
  transform: scale(var(--scale-hover));
}

.buy-btn:active {
  transform: scale(var(--scale-active));
}


/* =====================================================
   SIDEBAR ROOT
===================================================== */

#sidebarPanel .modal-content {
  background: var(--sidebar-bg);
  border: none;
  box-shadow: var(--elevation-modal);
}


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

#sidebarPanel .profileBox {
  display: flex;
  align-items: center;
  gap: var(--space-3);

  padding:
    calc(var(--space-2) * var(--density-multiplier))
    calc(var(--space-3) * var(--density-multiplier));

  background: var(--sidebar-header-bg);
  border-bottom: 1px solid var(--border-primary);
}

#sidebarPanel .profileBox .image-wrapper img {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-primary);
}

#sidebarPanel .profileBox strong {
  font-size: var(--font-size-md);
  color: #fff;
  font-weight: var(--font-weight-semibold);
}

#sidebarPanel .profileBox .text-muted {
  font-size: var(--font-size-xs);
  color: #fff !important;
}

#sidebarPanel .sidebar-close ion-icon {
  font-size: var(--font-size-lg);
  color: var(--text-muted);
}


/* =====================================================
   LIST TITLE
===================================================== */

#sidebarPanel .listview-title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.7px;
  text-transform: uppercase;

  color: var(--text-soft);

  padding:
    var(--space-1)
    var(--space-3)
    var(--space-1);
}


/* =====================================================
   LIST STRUCTURE
===================================================== */

#sidebarPanel .listview {
  padding: 0;
  margin: 0;
}

#sidebarPanel .listview li {
  margin: 0;
}


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

#sidebarPanel .listview .item {
  display: flex;
  align-items: center;
  gap: var(--space-3);

  padding:
    calc(var(--space-2) * var(--density-multiplier))
    calc(var(--space-3) * var(--density-multiplier));

  margin:
    var(--space-1)
    var(--space-2);

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

  background: var(--sidebar-item-bg);
  backdrop-filter: var(--glass-blur-light);

  border: 1px solid var(--sidebar-item-border);

  position: relative;

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


/* =====================================================
   HOVER
===================================================== */

#sidebarPanel .listview .item:hover {
  background: var(--sidebar-item-hover-bg);
  border-color: var(--border-primary);
}


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

#sidebarPanel .listview .item.active {
  background: var(--sidebar-item-active-bg);
  border-color: var(--sidebar-item-border-active);

  box-shadow: var(--glow-primary);
}

#sidebarPanel .listview .item.active::before {
  content: "";
  position: absolute;

  left: -1px;
  top: 6px;
  bottom: 6px;

  width: 3px;

  border-radius: var(--radius-xs);

  background: var(--grad-primary);
}

#sidebarPanel .listview .item.active .in {
  color: var(--sidebar-text-active);
  font-weight: var(--font-weight-bold);
}


/* =====================================================
   ICON BOX
===================================================== */

#sidebarPanel .icon-box {
  width: 32px;
  height: 32px;

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

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

  background: var(--sidebar-icon-bg);
  border: 1px solid var(--border-primary);
}

#sidebarPanel .icon-box ion-icon {
  font-size: var(--font-size-md);
  color: var(--sidebar-icon-color);
}

#sidebarPanel .item.active .icon-box {
  background: var(--grad-primary-soft);
  box-shadow: var(--glow-primary);
}


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

#sidebarPanel .listview .in {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--sidebar-text-color);
}


/* =====================================================
   LOGOUT SECTION
===================================================== */

#sidebarPanel .listview:last-child {
  margin-top: var(--space-2);
  border-top: 1px solid var(--sidebar-divider);
  padding-top: var(--space-1);
}


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

@media (max-width: 480px) {

  #sidebarPanel .modal-dialog {
    margin: 0;
    max-width: 85%;
  }

  #sidebarPanel .modal-content {
    border-radius:
      0
      var(--radius-lg)
      var(--radius-lg)
      0;
  }

}

/* ======================================================
ICO LAUNCHPAD TIMELINE
====================================================== */

.ico-launchpad{
  position:relative;
  display:flex;
  flex-direction:column;

  gap:calc(var(--space-7) * var(--density-multiplier));

  padding-left:calc(var(--space-7) * var(--density-multiplier));
}


/* ======================================================
TIMELINE SPINE
====================================================== */

.ico-launchpad::before{
  content:"";

  position:absolute;

  left:calc(var(--space-7) / 2);
  top:0;
  bottom:0;

  width:2px;

  background:linear-gradient(
    180deg,
    var(--brand-400),
    var(--border-soft),
    transparent
  );
}


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

.ico-stage{
  position:relative;
}


/* timeline dot */

.ico-stage-dot{

  position:absolute;

  left:calc(-1 * var(--space-4));
  top:var(--space-5);

  width:14px;
  height:14px;

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

  background:var(--brand-400);

  box-shadow:
    0 0 0 3px var(--surface-0),
    var(--glow-primary);
}


/* ======================================================
ROUND CARD
====================================================== */

.ico-round{

  margin-left:var(--space-4);

  border-radius:var(--radius-xl);

  border:1px solid var(--glass-card-border);

  background:var(--glass-card-bg);
  backdrop-filter:var(--glass-card-blur);

  padding:calc(var(--space-5) * var(--density-multiplier));

  display:flex;
  flex-direction:column;

  gap:var(--space-4);

}


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

.ico-round-header{

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

}

.ico-round-title{

  display:flex;
  align-items:center;

  gap:var(--space-2);

  font-size:var(--font-size-lg);
  font-weight:var(--font-weight-black);

}

.ico-round-title ion-icon{

  font-size:18px;
  color:var(--brand-400);

}

.ico-round-status{
  font-size:var(--font-size-xs);
  font-weight:var(--font-weight-bold);
}


/* ======================================================
TOKEN PRICE
====================================================== */

.ico-price{

  text-align:center;

}

.ico-price-label{

  font-size:var(--font-size-xs);
  color:var(--text-muted);

}

.ico-price-value{

  font-size:var(--font-size-xl);
  font-weight:var(--font-weight-black);

  color:var(--brand-700);

}


/* ======================================================
STATS GRID
====================================================== */

.ico-stats{

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:var(--space-3);

}

.ico-stat{

  display:flex;
  flex-direction:column;

  gap:var(--space-1);

}

.ico-stat-label{

  font-size:var(--font-size-xs);
  color:var(--text-muted);

}

.ico-stat-value{

  font-size:var(--font-size-sm);
  font-weight:var(--font-weight-bold);

}


/* ======================================================
PROGRESS
====================================================== */

.ico-progress{

  display:flex;
  flex-direction:column;

  gap:var(--space-2);

}

.ico-progress-track{

  height:10px;

  background:var(--progress-track-bg);

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

  overflow:hidden;

}

.ico-progress-fill{

  height:100%;

  background:var(--progress-fill-bg);

  box-shadow:var(--glow-primary);

  transition:width var(--transition-normal);

}


/* ======================================================
COUNTDOWN TIMER
====================================================== */

.ico-countdown{

  display:flex;

  justify-content:center;

  gap:var(--space-3);

  margin-top:var(--space-2);

}

.ico-time-box{

  text-align:center;

  padding:var(--space-2);

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

  background:var(--surface-2);

  min-width:58px;

}

.ico-time-value{

  font-size:var(--font-size-lg);
  font-weight:var(--font-weight-black);

  color:var(--brand-700);

}

.ico-time-label{

  font-size:var(--font-size-xs);

  color:var(--text-muted);

}


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

.ico-buy{

  display:block;

  width:100%;

  margin-top:var(--space-3);

  padding:var(--space-3);

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

  text-align:center;

  font-size:var(--font-size-sm);
  font-weight:var(--font-weight-bold);

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

  background:var(--grad-primary);

  box-shadow:var(--btn-primary-shadow);

  transition:var(--transition-normal);

}

.ico-buy:hover{
  transform:scale(var(--scale-hover));
}


/* ======================================================
STATE STYLES
====================================================== */

.ico-live{

  border-color:var(--brand-400);

  box-shadow:var(--elevation-2);

}

.ico-closed{

  opacity:var(--state-disabled-opacity);

  filter:saturate(.6);

}

.ico-upcoming{

  opacity:.85;

}


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

@media(max-width:640px){

  .ico-countdown{
    flex-wrap:wrap;
  }

}
/* ==========================================
   SWEET ALERT WEB3 PREMIUM MODAL
========================================== */

.crypto-swl{

position:relative;

background:var(--grad-glass-card);

backdrop-filter:blur(18px);

border:1px solid var(--border-primary);

border-radius:var(--radius-xl);

padding:32px;

color:var(--text-primary);

max-width:420px;

box-shadow:
0 20px 60px rgba(0,0,0,.85),
var(--glow-primary);

overflow:hidden;

}

/* subtle glass shimmer */

.crypto-swl::before{

content:"";

position:absolute;

inset:0;

background:linear-gradient(
120deg,
rgba(255,255,255,.08),
transparent 40%
);

pointer-events:none;

opacity:.6;

}

/* ==========================================
   TITLE
========================================== */

.crypto-swl .swal2-title{

font-size:1.45rem;

font-weight:var(--font-weight-bold);

letter-spacing:.4px;

color:var(--text-strong);

margin-bottom:10px;

}

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

.crypto-swl .swal2-html-container{

font-size:.95rem;

line-height:1.55;

color:var(--text-secondary);

margin-top:4px;

}

/* ==========================================
   ICON BASE
========================================== */

.crypto-swl .swal2-icon{

margin-bottom:14px;

}

/* ==========================================
   SUCCESS ICON
========================================== */

.swal2-icon.swal2-success{

border-color:var(--success-500);

box-shadow:
0 0 16px rgba(0,255,179,.35),
0 0 28px rgba(0,255,179,.15);

}

/* ==========================================
   ERROR ICON
========================================== */

.swal2-icon.swal2-error{

border-color:var(--danger-500);

box-shadow:
0 0 18px rgba(255,80,80,.45);

}

/* ==========================================
   WARNING ICON
========================================== */

.swal2-icon.swal2-warning{

border-color:var(--warning-500);

box-shadow:
0 0 18px rgba(255,200,80,.45);

}

/* ==========================================
   ACTION AREA
========================================== */

.crypto-swl .swal2-actions{

margin-top:22px;

}

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

.crypto-swl .btn{

min-width:140px;

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

font-weight:var(--font-weight-semibold);

letter-spacing:.3px;

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

}

/* hover lift */

.crypto-swl .btn:hover{

transform:translateY(-2px);

box-shadow:
var(--glow-primary),
0 10px 24px rgba(0,0,0,.7);

}

/* ==========================================
   POPUP ANIMATION
========================================== */

.swal2-show{

animation:cryptoModalPop .28s cubic-bezier(.16,1,.3,1);

}

@keyframes cryptoModalPop{

0%{
transform:scale(.85);
opacity:0;
}

100%{
transform:scale(1);
opacity:1;
}

}

/* ==========================================
   BACKDROP
========================================== */

.swal2-backdrop-show{

background:rgba(2,8,20,.75) !important;

backdrop-filter:blur(.5px);

}
/* ==========================================
   SPONSOR TREE
   Compatible with tokenized design system
========================================== */

.tree-wrapper{
padding:var(--space-3);
overflow:auto;
}

/* root */

.dtree,
.dtree ul{

list-style:none;
margin:0;
padding-left:22px;
position:relative;

}

/* node */

.dtree li{
position:relative;
}

/* vertical connector */

.dtree li::before{

content:"";

position:absolute;

top:0;
left:-14px;

width:1px;
height:100%;

background:var(--border-primary);

}

/* horizontal connector */

.dtree li::after{

content:"";

position:absolute;

top:11px;
left:-14px;

width:14px;
height:1px;

background:var(--border-primary);

}

/* stop vertical line on last node */

.dtree li:last-child::before{
height:11px;
}

/* node row */

.dtree-row{

display:flex;
align-items:center;
gap:6px;

min-height:24px;

}

/* toggle */

.dtree-toggle{

width:16px;
display:flex;
align-items:center;
justify-content:center;

color:var(--brand-700);
cursor:pointer;

flex-shrink:0;

}

/* icon */

.dtree-icon{

display:flex;
align-items:center;

color:var(--brand-700);

font-size:16px;

flex-shrink:0;

}

/* node label */

.dtree-label{

text-decoration:none;
color:var(--text-primary);

font-size:var(--font-size-sm);
line-height:1.3;

}

/* hover */

.dtree-label:hover{
color:var(--brand-700);
}

/* children */

.dtree-children{
display:none;
}

.dtree li.open > .dtree-children{
display:block;
}

/* leaf dot */

.dtree-dot{

width:6px;
height:6px;

border-radius:50%;

background:var(--brand-700);

display:inline-block;

}

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

@media (max-width:480px){

.tree-wrapper{
overflow-x:auto;
}

.dtree,
.dtree ul{
padding-left:20px;
}

.dtree-row{
min-height:22px;
}

}
/* ==========================================
   UPLOAD INTERACTION (TOKENIZED)
========================================== */

.crypto-upload-label{
    display:block;
    cursor:pointer;
}

/* Upload Box */

.crypto-upload-box{
    border:1px dashed var(--border-soft);
    padding:var(--space-4);
    border-radius:var(--radius-md);

    text-align:center;

    background:var(--surface-glass-1);

    transition:
        background var(--transition-fast),
        border var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast);
}

/* Hover (system-driven, not hardcoded) */

.crypto-upload-box:hover{
    border-color:var(--brand-400);
    background:var(--state-hover-overlay);
    box-shadow:var(--glow-primary);
    transform:translateY(-2px);
}

/* Icon */

.crypto-upload-box ion-icon{
    font-size:var(--font-size-xl);
    display:block;
    margin-bottom:var(--space-1);

    color:var(--icon-primary);

    transition:
        color var(--transition-fast),
        text-shadow var(--transition-fast),
        transform var(--transition-fast);
}

/* Hover icon lift */

.crypto-upload-box:hover ion-icon{
    color:var(--brand-400);
    text-shadow:var(--glow-primary);
    transform:translateY(-2px);
}

/* Label text */

.crypto-upload-box span{
    font-size:var(--font-size-sm);
    font-weight:var(--font-weight-medium);
    color:var(--text-secondary);
}

/* ==========================================
   AVATAR (HOOK INTO SYSTEM, NOT OVERRIDE)
========================================== */

/* You already have .crypto-avatar-img in system extend only */

.crypto-avatar-img{
    border:2px solid var(--border-glass);

    box-shadow:
        0 0 12px rgba(92,200,255,0.25),
        var(--glow-primary);

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

/* Hover polish */

.crypto-avatar-wrapper:hover .crypto-avatar-img{
    transform:scale(var(--scale-hover));

    border-color:var(--brand-400);

    box-shadow:
        var(--glow-primary),
        0 12px 28px rgba(0,0,0,0.6);
}