/* =====================================================
   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-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);




}
[data-theme="gold"] {

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

--brand-50:  #fdf6e3;
--brand-100: #f8e7b5;
--brand-200: #f1d47a;
--brand-300: #e6c25a;
--brand-400: #d4af37;   /* Classic gold */
--brand-500: #c89b2c;
--brand-600: #b8860b;
--brand-700: #8b6508;

--accent-cyan: #d4af37;
--accent-mint: #e6c25a;

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

--warning-500: #f1d47a;
--success-500: #d4af37;


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

--surface-0: #050403;
--surface-1: #0d0b07;
--surface-2: #111111;
--surface-3: #161616;
--surface-4: #1c1c1c;

--surface-glass-1: rgba(255,255,255,0.03);
--surface-glass-2: rgba(255,255,255,0.06);
--surface-glass-3: rgba(255,255,255,0.10);


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

--text-strong: #ffffff;
--text-primary: #f5e6c8;
--text-secondary: #e6c25a;
--text-muted: #bfa76a;
--text-soft: #9c8652;
--text-disabled: #5a4c2a;


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

--border-primary: rgba(212,175,55,0.45);
--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.45);
--glow-strong: 0 0 25px rgba(212,175,55,0.65);
--glow-danger: 0 0 18px rgba(255,80,80,0.35);


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

--grad-primary: linear-gradient(
  135deg,
  #f1d47a,
  #d4af37,
  #b8860b
);

--grad-primary-soft: linear-gradient(
  135deg,
  rgba(212,175,55,0.35),
  rgba(184,134,11,0.18)
);

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

--grad-surface-dark: linear-gradient(
  135deg,
  #000000,
  #111111
);

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

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

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


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

--state-hover-overlay: rgba(212,175,55,0.12);
--state-active-overlay: rgba(212,175,55,0.22);

--state-live: #d4af37;
--state-closed: #ff9a9a;
--state-upcoming: #e6c25a;


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

--status-success-bg: rgba(212,175,55,0.15);
--status-success-border: rgba(212,175,55,0.45);

--status-warning-bg: rgba(241,212,122,0.15);
--status-warning-border: rgba(241,212,122,0.45);

--status-info-bg: rgba(212,175,55,0.15);
--status-info-border: rgba(212,175,55,0.45);


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

--progress-track-bg: rgba(255,255,255,0.08);
--progress-fill-bg: linear-gradient(
  90deg,
  #f1d47a,
  #d4af37,
  #b8860b
);


/* =====================================================
   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: var(--border-primary);
--card-shadow: 0 20px 50px rgba(0,0,0,0.9);

}
/* =====================================================
   BITZENKO THEME
===================================================== */

[data-theme="bitzenko"] {


--brand-50:  #f0fbff;
--brand-100: #d6f6ff;
--brand-200: #aeeeff;
--brand-300: #5fe3ff;
--brand-400: #2ad1ff;
--brand-500: #009dff;
--brand-600: #0077ff;
--brand-700: #003a8c;

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

--danger-300: #ff6a6a;
--danger-500: #ff1f1f;



--surface-0: #020814;
--surface-1: #071b35;
--surface-2: #0b2348;
--surface-3: #123b6e;
--surface-4: #1a4a85;

--surface-accent-overlay: rgba(255,40,40,0.06);



--text-strong: #ffffff;
--text-primary: #e8faff;
--text-secondary: #cfefff;
--text-muted: #9fdfff;
--text-soft: #7fbbe0;



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



--glow-primary:
  0 0 18px rgba(0,240,255,0.45),
  0 0 40px rgba(0,180,255,0.25);

--glow-danger:
  0 0 18px rgba(255,60,60,0.55),
  0 0 40px rgba(255,0,0,0.30);

--glow-strong:
  0 0 25px rgba(0,240,255,0.6),
  0 0 60px rgba(255,40,40,0.25);


--icon-gradient:
  linear-gradient(
    135deg,
    #00f0ff 0%,
    #009dff 35%,
    #0077ff 60%,
    #ff1f1f 100%
  );

--icon-gradient-hover:
  linear-gradient(
    135deg,
    #00b4ff,
    #0077ff,
    #ff1f1f,
    #990000
  );

--icon-gradient-active:
  linear-gradient(
    135deg,
    #00b4ff,
    #ff1f1f,
    #ff0000
  );

--icon-glow:
  0 0 12px rgba(0,240,255,0.7),
  0 0 25px rgba(0,180,255,0.45),
  0 0 18px rgba(255,40,40,0.45),
  0 0 40px rgba(255,0,0,0.25);

--icon-glow-hover:
  0 0 14px rgba(255,60,60,0.9),
  0 0 35px rgba(255,0,0,0.6);



--grad-primary: linear-gradient(
  135deg,
  #00f0ff,
  #009dff,
  #0077ff
);

--grad-accent: linear-gradient(
  90deg,
  #00ffd5,
  #00b4ff,
  #2a7de1,
  #ff1f1f
);

--grad-danger: linear-gradient(
  135deg,
  #ff6a6a,
  #ff1f1f,
  #990000
);

--grad-surface-dark:
  radial-gradient(circle at 80% 20%, rgba(0,240,255,0.12), transparent 40%),
  radial-gradient(circle at 20% 80%, rgba(255,40,40,0.14), transparent 40%),
  linear-gradient(135deg,#020814,#071b35,#0b2348);

--grad-surface-elevated: linear-gradient(
  135deg,
  #071b35,
  #1a4a85
);

--grad-glass-card: linear-gradient(
  180deg,
  rgba(20,40,80,0.75),
  rgba(10,16,35,0.92)
);


--state-hover-overlay: rgba(0,240,255,0.14);
--state-active-overlay: rgba(0,240,255,0.22);

--state-live: #00f0ff;
--state-closed: #ff4d4d;
--state-upcoming: #5fe3ff;



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

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


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

--card-shadow:
  0 25px 70px rgba(0,0,0,0.9),
  0 0 25px rgba(0,240,255,0.15),
  0 0 20px rgba(255,40,40,0.12);


--progress-fill-bg: var(--grad-accent);

--badge-live-bg: rgba(0,240,255,0.2);
--badge-live-border: rgba(0,240,255,0.6);

--badge-closed-bg: rgba(255,60,60,0.2);
--badge-closed-border: rgba(255,60,60,0.6);

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

/* =====================================================
   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);

}

.crypto-card-icon i,
.crypto-card-icon ion-icon,
.crypto-list-icon ion-icon,
.crypto-title-icon,
.appBottomMenu ion-icon {

  background: var(--icon-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  color: var(--brand-300); 

  text-shadow: var(--icon-glow);

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


.crypto-card:hover .crypto-card-icon i,
.crypto-card:hover .crypto-card-icon ion-icon {
  background: var(--icon-gradient-hover);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  text-shadow: var(--icon-glow-hover);
  transform: scale(1.1);
}

.appBottomMenu .item.active ion-icon {
  background: var(--icon-gradient-active);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  text-shadow: var(--icon-glow-hover);
}

.crypto-card-quick .crypto-card-icon i {
  background: var(--icon-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  text-shadow: var(--icon-glow);
}


.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(--grad-surface-dark);
    border-bottom: 1px solid var(--border-primary);
}
.pageTitle{
    font-weight: var(--font-weight-bold);
    letter-spacing: .6px;
    color: var(--text-strong);
}

/* =====================================================
   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(--grad-glass-card); /* same tone as quick cards */
    backdrop-filter: var(--glass-blur-heavy);
    -webkit-backdrop-filter: var(--glass-blur-heavy);

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

    box-shadow:
        0 15px 40px rgba(0,0,0,0.6),
        inset 0 1px 0 rgba(255,255,255,0.06);
}

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

    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.08),
        transparent 60%
    );

    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-soft);

    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: 
    radial-gradient(circle at 80% 20%, rgba(0,240,255,0.08), transparent 40%),
    radial-gradient(circle at 20% 80%, rgba(255,40,40,0.08), transparent 40%),
    var(--grad-glass-card);
  backdrop-filter: var(--glass-blur-medium);
  -webkit-backdrop-filter: var(--glass-blur-medium);

   border: 1px solid rgba(255,60,60,0.25);

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

  transition: var(--transition-normal);
  overflow: hidden;
}
.crypto-card::before {
  z-index: 1;
}

.crypto-card {
  z-index: 0;
}
.crypto-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: -50%;
  width: 50%;
  height: 2px;

  background: linear-gradient(
    90deg,
    transparent,
    #00f0ff,
    #2a7de1,
    #ff1f1f,
    transparent
  );

  animation: topFlow 2.5s linear infinite;
  z-index: 3;
}
.crypto-card::after {
  filter: blur(0.8px);
  opacity: 0.9;
}

@keyframes topFlow {
  0% {
    left: -50%;
  }
  100% {
    left: 100%;
  }
}
.crypto-card-icon i,
.crypto-card-icon ion-icon {
  color: var(--brand-300);

  text-shadow:
    0 0 10px rgba(0,240,255,0.6),
    0 0 20px rgba(255,40,40,0.2);
}
.crypto-card-interactive:hover {
  transform: translateY(-6px);

  box-shadow:
    0 20px 40px rgba(0,0,0,0.8),
    0 0 20px rgba(0,240,255,0.25),
    0 0 30px rgba(255,40,40,0.15);
}


.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-3),
    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(--brand-300);
}
/* =====================================================
   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);
  background:
    radial-gradient(circle at 30% 20%, rgba(0,240,255,0.12), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(255,40,40,0.10), transparent 40%),
    var(--grad-glass-card);

  border: 1px solid rgba(92,200,255,0.25);
  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(--brand-400);
  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 14px 30px rgba(0,0,0,0.8),
    0 25px 60px 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);
  color: var(--state-live);
  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);
  color: var(--state-live);
}

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

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

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

/* ==========================================
   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);

    background: linear-gradient(
        145deg,
        var(--surface-2),
        var(--surface-1)
    );

    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);

    background: linear-gradient(
        145deg,
        var(--surface-1),
        var(--surface-2)
    );

    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-3);
  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);
}


.btn-green-glass {
  background: linear-gradient(
    135deg,
    rgba(0,255,179,0.25),
    rgba(0,255,179,0.10)
  );

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

  border: 1px solid rgba(0,255,179,0.45);
  color: var(--success-500);

  box-shadow:
    0 0 10px rgba(0,255,179,0.25),
    inset 0 1px 0 rgba(255,255,255,0.05);

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

.btn-green-glass:hover {
  background: linear-gradient(
    135deg,
    rgba(0,255,179,0.35),
    rgba(0,255,179,0.15)
  );

  box-shadow:
    0 0 18px rgba(0,255,179,0.45),
    0 8px 20px rgba(0,0,0,0.6);
}

.btn-red-glass {
  background: linear-gradient(
    135deg,
    rgba(255,77,109,0.25),
    rgba(255,77,109,0.10)
  );

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

  border: 1px solid var(--status-danger-border);
  color: var(--danger-500);

  box-shadow:
    0 0 10px rgba(255,77,109,0.25),
    inset 0 1px 0 rgba(255,255,255,0.05);

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

.btn-red-glass:hover {
  background: linear-gradient(
    135deg,
    rgba(255,77,109,0.35),
    rgba(255,77,109,0.15)
  );

  box-shadow:
    0 0 18px rgba(255,77,109,0.45),
    0 8px 20px rgba(0,0,0,0.6);
}





/* ================= 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(--brand-400);
}
.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-200);
}
























































/* =====================================================
   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(--grad-surface-dark);
  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(--grad-surface-elevated);
  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: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}

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

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



#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);
}


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

#sidebarPanel .listview li {
  margin: 0;
}


#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(--surface-glass-1);
  backdrop-filter: var(--glass-blur-light);

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

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


/* Hover */

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


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

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

  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(--text-strong);
  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(--grad-surface-elevated);
  border: 1px solid var(--border-primary);
}

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

#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(--text-secondary);
}


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

#sidebarPanel .listview:last-child {
  margin-top: var(--space-2);
  border-top: 1px solid var(--border-soft);
  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
FLUID RESPONSIVE VERSION
====================================================== */

.ico-launchpad{

  position:relative;
  display:flex;
  flex-direction:column;

  gap:clamp(16px,2.2vw,32px);

  padding-left:clamp(18px,3vw,36px);

}


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

.ico-launchpad::before{

  content:"";

  position:absolute;

  left:clamp(8px,1.2vw,18px);

  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:clamp(-14px,-1.6vw,-10px);
  top:clamp(18px,2vw,24px);

  width:clamp(10px,1.2vw,14px);
  height:clamp(10px,1.2vw,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:clamp(8px,1vw,18px);

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

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

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

  padding:clamp(14px,2vw,24px);

  display:flex;
  flex-direction:column;

  gap:clamp(10px,1.6vw,18px);

}


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

.ico-round-header{

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

}

.ico-round-title{

  display:flex;
  align-items:center;

  gap:clamp(6px,1vw,10px);

  font-size:clamp(14px,1.4vw,18px);
  font-weight:var(--font-weight-black);

}

.ico-round-title ion-icon{

  font-size:clamp(16px,1.6vw,18px);
  color:var(--brand-400);

}

.ico-round-status{

  font-size:clamp(10px,1vw,12px);
  font-weight:var(--font-weight-bold);

}


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

.ico-price{

  text-align:center;

}

.ico-price-label{

  font-size:clamp(10px,1vw,12px);
  color:var(--text-muted);

}

.ico-price-value{

  font-size:clamp(18px,2vw,26px);
  font-weight:var(--font-weight-black);

  color:var(--brand-400);

}


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

.ico-stats{

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:clamp(8px,1.4vw,14px);

}

.ico-stat{

  display:flex;
  flex-direction:column;

  gap:4px;

}

.ico-stat-label{

  font-size:clamp(10px,1vw,12px);
  color:var(--text-muted);

}

.ico-stat-value{

  font-size:clamp(12px,1.2vw,14px);
  font-weight:var(--font-weight-bold);

}


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

.ico-progress{

  display:flex;
  flex-direction:column;

  gap:clamp(6px,1vw,10px);

}

.ico-progress-track{

  height:clamp(6px,0.8vw,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:clamp(6px,1vw,12px);

  margin-top:clamp(6px,1vw,12px);

  flex-wrap:wrap;

}

.ico-time-box{

  text-align:center;

  padding:clamp(6px,1vw,10px);

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

  background:var(--surface-2);

  min-width:clamp(42px,5vw,58px);

}

.ico-time-value{

  font-size:clamp(14px,1.8vw,20px);
  font-weight:var(--font-weight-black);

  color:var(--brand-400);

}

.ico-time-label{

  font-size:clamp(9px,0.9vw,11px);

  color:var(--text-muted);

}


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

.ico-buy{

  display:block;

  width:100%;

  margin-top:clamp(8px,1.4vw,14px);

  padding:clamp(8px,1.4vw,14px);

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

  text-align:center;

  font-size:clamp(11px,1.2vw,14px);
  font-weight:var(--font-weight-black);

  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;

}
/* ==========================================
   SWEET ALERT TOKENIZED
========================================== */

.crypto-swl{

background:var(--surface-glass);
backdrop-filter:blur(16px);

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

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

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

padding:28px;

color:var(--text-primary);

}

/* title */

.crypto-swl .swal2-title{

font-size:1.35rem;
font-weight:600;

color:var(--text-primary);

}

/* text */

.crypto-swl .swal2-html-container{

font-size:.95rem;
color:var(--text-secondary);

margin-top:6px;

}

/* success */

.swal2-icon.swal2-success{

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

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

}

/* error */

.swal2-icon.swal2-error{

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

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

}

/* warning */

.swal2-icon.swal2-warning{

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

}

/* confirm button */

.crypto-swl .btn{

min-width:120px;

}


/* ===============================
   DATE (COMPACT)
=============================== */
.royalty-date{
    text-align:center;
    font-size:clamp(10px, 2.8vw, 12px);
    color:var(--text-secondary);
    margin-bottom:var(--space-2);
}

/* ===============================
   CLOCK (FORCE SINGLE ROW)
=============================== */
.flip-clock {
    display: flex;
    align-items: center; /* KEY FIX */
    justify-content: center;
    gap: 6px;
}
.flip-sep {
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 18px;
    font-weight: 600;
    color: var(--text-soft);

    position: relative;
    top: -8px; /* PERFECT optical alignment */
}
/* FLEX UNITS */
.flip-unit{
    flex:1;
    min-width:0;
    text-align:center;
}

/* ===============================
   BOX (ULTRA COMPACT)
=============================== */
.flip-simple{
    width:100%;
    aspect-ratio:1/1;

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

    font-size:clamp(13px, 4vw, 18px);
    font-weight:var(--font-weight-bold);

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

    color:var(--text-strong);
    box-shadow:var(--elevation-1);
}

/* DAYS slightly stronger but safe */
#flipDays{
    font-size:clamp(14px, 4.5vw, 20px);
}

/* ===============================
   LABEL (MINIMAL)
=============================== */
.flip-label{
    margin-top:2px;
    font-size:clamp(8px, 2.5vw, 10px);
    color:var(--text-soft);
    letter-spacing:0.3px;
}

/* ===============================
   ANIMATION (LIGHTER)
=============================== */
.flip-animate{
    animation:flipUp 0.25s ease;
}

@keyframes flipUp{
    0%{ transform:translateY(10%) scale(0.96); opacity:0.6; }
    100%{ transform:translateY(0) scale(1); opacity:1; }
}

/* ===============================
   PROGRESS (THINNER)
=============================== */
.royalty-progress{
    margin-top:var(--space-3);
    height:4px;
    border-radius:var(--radius-pill);
    background:var(--progress-track-bg);
    overflow:hidden;
}

.royalty-progress-fill{
    height:100%;
    width:0%;
    background:var(--progress-fill-bg);
    transition:width var(--transition-fast);
}

/* ===============================
   STATES (SAFE FOR MOBILE)
=============================== */
.royalty-warning{
    border:1px solid var(--status-warning-border);
}

.royalty-danger{
    border:1px solid var(--status-danger-border);
    box-shadow:var(--glow-danger);
}

/* remove scale pulse on mobile (prevents layout shift) */
@media (max-width:480px){
    .royalty-danger{
        animation:none;
    }
}
/* DIRECT TRACKER */
.royalty-direct-box{
    margin-top:var(--space-3);
    padding:var(--space-3);

    border-radius:var(--radius-md);
    background:var(--surface-glass-1);
    border:1px solid var(--border-glass);
}

/* HEADER */
.royalty-direct-header{
    font-size:var(--font-size-xs);
    color:var(--text-soft);
    margin-bottom:4px;
}

/* COUNT */
.royalty-direct-count{
    font-size:var(--font-size-lg);
    font-weight:var(--font-weight-bold);
    color:var(--text-strong);
}

/* SUBTEXT */
.royalty-direct-sub{
    font-size:var(--font-size-xs);
    color:var(--text-muted);
    margin-bottom:6px;
}

/* PROGRESS BAR */
.royalty-direct-progress{
    height:5px;
    border-radius:var(--radius-pill);
    background:var(--progress-track-bg);
    overflow:hidden;
}

.royalty-direct-fill{
    height:100%;
    background:var(--grad-accent);
    transition:width 0.3s ease;
}

.live-animated {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;

    background: var(--danger-500); /* RED */
	box-shadow: 0 0 8px rgba(255,77,109,0.7);
    position: relative;
}

/* pulse ring */
.live-dot::after {
    content: "";
    position: absolute;
    inset: 0;

    border-radius: 50%;
    background: var(--danger-500); /* RED */

    animation: livePing 1.6s ease-out infinite;
    opacity: 0.7;
}

@keyframes livePing {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }
    80% {
        transform: scale(2.5);
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

.pro-clock{
display:flex;
align-items:center;
gap:var(--space-2);
}

.clock-group{
display:flex;
flex-direction:column;
align-items:center;
}

.clock-val{
min-width:34px;
height:34px;


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

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

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

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

color:var(--accent-cyan);

backdrop-filter:var(--glass-blur-medium);
transition:var(--transition-fast);


}

.clock-label{
font-size:9px;
color:var(--text-soft);
margin-top:2px;
}

/* tick animation */
.clock-val.tick{
transform:scale(1.05);
box-shadow:var(--glow-primary);
}

/* danger state */
.clock-danger .clock-val{
color:var(--danger-500);
box-shadow:var(--glow-danger);
}

/* mobile */
@media(max-width:768px){

.clock-val{
    min-width:28px;
    height:28px;
    font-size:11px;
}

.clock-label{
    font-size:8px;
}

}
/* =========================
   POSITION SWITCH (TOKENIZED)
========================= */

.position-switch {
    position: relative;
    display: flex;
    align-items: center;

    height: 44px;
    border-radius: var(--radius-pill);

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

    backdrop-filter: var(--glass-blur-medium);

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

    overflow: hidden;
}

/* Hide radios */
.position-switch input {
    display: none;
}

/* Labels */
.pos-label {
    flex: 1;
    text-align: center;
    z-index: 2;

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

    color: var(--text-muted);

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

/* Active text */
#posLeft:checked ~ .left,
#posRight:checked ~ .right {
    color: var(--text-strong);
}

/* =========================
   SLIDER (THE MAGIC)
========================= */

.position-slider {
    position: absolute;
    top: 4px;
    left: 4px;

    width: calc(50% - 4px);
    height: calc(100% - 8px);

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

    background: var(--grad-accent);

    box-shadow:
        var(--glow-primary),
        inset 0 0 10px rgba(255,255,255,0.15);

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

/* Move right */
#posRight:checked ~ .position-slider {
    transform: translateX(100%);
}

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

.position-switch:hover {
    box-shadow:
        var(--elevation-2),
        inset 0 0 0 1px rgba(255,255,255,0.04);
}

/* =========================
   ACTIVE PRESS
========================= */

.position-switch:active .position-slider {
    transform: scale(0.96);
}
/* ===== LOCKED STATE ===== */
.position-switch.locked {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Disable clicks */
.position-switch.locked .pos-label {
    pointer-events: none;
}

/* Subtle visual feedback */
.position-switch.locked .position-slider {
    box-shadow:
        0 0 8px rgba(255,255,255,0.15),
        inset 0 0 6px rgba(0,0,0,0.2);
}

/* =========================
   LOCKED REWARD CARD
========================= */

.locked-card {
    position: relative;
    overflow: hidden;

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

    backdrop-filter: var(--glass-blur-medium);

    box-shadow:
        inset 0 0 20px rgba(255,255,255,0.03),
        0 10px 30px rgba(0,0,0,0.6);
}

/* Glow overlay */
.locked-card::before {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.03),
        transparent
    );

    animation: shimmer 3s linear infinite;
}

/* Lock icon */
.lock-icon {
    font-size: 28px;
    color: var(--text-muted);

    text-shadow: 0 0 10px rgba(255,255,255,0.2);
}

/* Button polish */
.locked-card .btn {
    box-shadow: var(--glow-primary);
}

/* Animation */
@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}