/* ==========================================================================
   01 ROOT / TOKENS
   Bloxio Design System — Global Foundation
   لا يحتوي Layout أو Components
   ========================================================================== */

:root{

  --color-primary:#00e0ff;
  --color-primary-soft:rgba(0,224,255,.12);
  --color-primary-border:rgba(0,224,255,.22);

  --color-success:#22c55e;
  --color-success-soft:rgba(34,197,94,.14);

  --color-danger:#F84960;
  --color-danger-soft:rgba(248,73,96,.12);

  --color-warning:#FFCD18;
  --color-warning-soft:rgba(255,205,24,.12);

  --color-info:#3B82F6;

  /* =====================================================
     SURFACE SYSTEM
  ===================================================== */

  --bg:#0b0f14;

  --surface-1:#07111b;
  --surface-2:#0b1422;
  --surface-3:#0f1a1f;
  --surface-4:#122031;

  --card:#0f1a1f;

  --overlay:
    rgba(2,6,12,.55);

  --glass:
    rgba(255,255,255,.03);

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

  --border:#12323f;

  --border-soft:
    rgba(255,255,255,.04);

  --border-light:
    rgba(255,255,255,.06);

  --border-active:
    rgba(0,224,255,.25);

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

  --text:#E6F1FF;

  --text-soft:#C8D6E5;

  --text-muted:#9FB3C8;

  --text-dim:#718096;

  --text-disabled:
    rgba(255,255,255,.42);

  /* =====================================================
     MARKET COLORS
  ===================================================== */

  --green:#02C076;
  --green-glow:
    rgba(14,203,129,.60);

  --red:#F84960;
  --red-glow:
    rgba(246,70,93,.60);

  --yellow:#FFCD18;

  /* =====================================================
     RADIUS SYSTEM
  ===================================================== */

  --radius-xs:8px;

  --radius-sm:12px;

  --radius-md:16px;

  --radius-lg:20px;

  --radius-xl:24px;

  --radius-full:999px;

  /* =====================================================
     SPACING SYSTEM
  ===================================================== */

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

  /* =====================================================
     SHADOW SYSTEM
  ===================================================== */

  --shadow-sm:
    0 4px 12px rgba(0,0,0,.12);

  --shadow-md:
    0 10px 24px rgba(0,0,0,.18);

  --shadow-lg:
    0 16px 38px rgba(0,0,0,.26);

  --shadow-xl:
    0 22px 44px rgba(0,0,0,.34);

  --shadow-primary:
    0 0 20px rgba(0,224,255,.15);

  /* =====================================================
     TRANSITIONS
  ===================================================== */

  --speed-fast:.16s;

  --speed-normal:.25s;

  --speed-slow:.40s;

  --ease:
    cubic-bezier(
      .22,
      .61,
      .36,
      1
    );

  /* =====================================================
     SAFE AREA
  ===================================================== */

  --safe-top:
    env(
      safe-area-inset-top,
      0px
    );

  --safe-bottom:
    env(
      safe-area-inset-bottom,
      0px
    );

  --safe-left:
    env(
      safe-area-inset-left,
      0px
    );

  --safe-right:
    env(
      safe-area-inset-right,
      0px
    );

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

  --header-height:64px;

  --mobile-nav-height:72px;

  /* =====================================================
     LAYERS
  ===================================================== */

  --z-base:1;

  --z-header:50;

  --z-modal:120;

  --z-toast:140;

  --z-loader:300;

  /* =====================================================
     BLUR SYSTEM
  ===================================================== */

  --blur-sm:6px;

  --blur-md:10px;

  --blur-lg:16px;

  /* =====================================================
     CONTENT LIMITS
  ===================================================== */

  --content-max:
    1600px;

}


/* ==========================================================
   DARK MODE
========================================================== */

body[data-theme="dark"]{

  background:
    var(--bg);

  color:
    var(--text);

}


/* ==========================================================
   ACCESSIBILITY
========================================================== */

@media (prefers-reduced-motion:reduce){

  :root{

    --speed-fast:0s;

    --speed-normal:0s;

    --speed-slow:0s;

  }
 }

/* ==========================================================================
   02 RESET / BASE
   Bloxio Global Reset Layer
   Browser Normalize + Mobile Stability + PWA Safety
   ========================================================================== */


/* ==========================================================
   UNIVERSAL RESET
========================================================== */

*,
*::before,
*::after{

  box-sizing:border-box;

  margin:0;

  padding:0;

  min-width:0;

}


html{

  -webkit-text-size-adjust:100%;

  text-size-adjust:100%;

  scroll-behavior:smooth;

  overflow-x:hidden;

  min-height:100%;

  background:var(--bg);

  color:var(--text);

}


body{

  min-height:100vh;

  min-height:100dvh;

  overflow-x:hidden;

  background:var(--bg);

  color:var(--text);

  font-family:

    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;

  line-height:1.45;

  text-rendering:

    optimizeLegibility;

  -webkit-font-smoothing:

    antialiased;

  -moz-osx-font-smoothing:

    grayscale;

  overscroll-behavior-y:auto;

  touch-action:auto;

  -webkit-tap-highlight-color:

    transparent;
 }


/* ==========================================================
   MEDIA
========================================================== */

img,
picture,
video,
canvas,
svg{

  display:block;

  max-width:100%;

  height:auto;

}


video{

  object-fit:cover;

}


svg{

  overflow:hidden;

}


/* ==========================================================
   FORM RESET
========================================================== */

input,
button,
textarea,
select{

  font:inherit;

  color:inherit;

  border:none;

  outline:none;

  background:none;

}


button{

  cursor:pointer;

  user-select:none;

  -webkit-user-select:none;

  touch-action:manipulation;

}


button:disabled{

  cursor:not-allowed;

  opacity:.55;

}


textarea{

  resize:vertical;

}


input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{

  appearance:none;

  margin:0;

}


input[type="number"]{

  appearance:textfield;

  -moz-appearance:textfield;

}


select{

  appearance:none;

  -webkit-appearance:none;

}


/* ==========================================================
   LINK RESET
========================================================== */

a{

  text-decoration:none;

  color:inherit;

}


a:focus-visible{

  outline:

    2px solid var(--color-primary);

  outline-offset:2px;

}


/* ==========================================================
   LIST RESET
========================================================== */

ul,
ol{

  list-style:none;

}


/* ==========================================================
   TABLE RESET
========================================================== */

table{

  width:100%;

  border-collapse:collapse;

  border-spacing:0;

}


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

h1,
h2,
h3,
h4,
h5,
h6{

  font:inherit;

}


strong{

  font-weight:700;

}


small{

  font-size:.875em;

}


code{

  font-family:

    ui-monospace,
    monospace;

}


/* ==========================================================
   SELECTION
========================================================== */

::selection{

  background:

    var(--color-primary-soft);

  color:

    #fff;

}


/* ==========================================================
   SCROLLBAR
========================================================== */

*{

  scrollbar-width:thin;

  scrollbar-color:

    var(--border)
    transparent;

}


*::-webkit-scrollbar{

  width:8px;

  height:8px;

}


*::-webkit-scrollbar-track{

  background:transparent;

}


*::-webkit-scrollbar-thumb{

  background:

    rgba(255,255,255,.10);

  border-radius:

    var(--radius-full);

}


*::-webkit-scrollbar-thumb:hover{

  background:

    rgba(255,255,255,.18);

}


/* ==========================================================
   FOCUS SYSTEM
========================================================== */

:focus-visible{

  outline:

    2px solid
    var(--color-primary);

  outline-offset:2px;

}


/* ==========================================================
   HIDDEN SYSTEM
========================================================== */

[hidden]{

  display:none !important;

}


.hidden{

  display:none !important;

}


/* ==========================================================
   MOBILE SAFE FIXES
========================================================== */

body{

  padding-left:

    var(--safe-left);

  padding-right:

    var(--safe-right);

}


input,
textarea,
select{

  font-size:16px;

}


/* ==========================================================
   PWA FIXES
========================================================== */

html{

  -webkit-overflow-scrolling:

    touch;

}


body.standalone{

  overscroll-behavior:

    none;

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion:reduce){

  *{

    animation:none !important;

    transition:none !important;

    scroll-behavior:auto !important;

  }
 }

/* ==========================================================================
   03 APP PRELOAD
   Boot System + Loader + Auth Lock + App Visibility
   ========================================================================== */


/* ==========================================================
   APP LOCK STATE
========================================================== */

body.app-preload{

  overflow:hidden;

  touch-action:none;

}


body.app-preload #app{

  opacity:0;

  visibility:hidden;

  pointer-events:none;

  user-select:none;

  transform:

    translateY(4px);

}


body.app-ready #app{

  opacity:1;

  visibility:visible;
 
  overflow:auto;

  touch-action:auto;

  pointer-events:auto;

  user-select:auto;

  transform:none;

  transition:

    opacity var(--speed-normal) var(--ease),

    transform var(--speed-normal) var(--ease),

    visibility var(--speed-normal);

}


/* ==========================================================
   GLOBAL LOADER ROOT
========================================================== */

#globalLoader{

  position:fixed;

  inset:0;

  z-index:var(--z-loader);

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  gap:20px;

  background:

    radial-gradient(
      circle at center,
      rgba(0,224,255,.06),
      transparent 45%
    ),

    linear-gradient(
      180deg,
      #020710 0%,
      #07111b 100%
    );

  opacity:1;

  visibility:visible;

  transition:

    opacity .40s var(--ease),

    visibility .40s var(--ease);

  overflow:hidden;

}


/* ==========================================================
   LOADER EXIT
========================================================== */

body.app-ready #globalLoader{

  opacity:0;

  visibility:hidden;

  pointer-events:none;

}


/* ==========================================================
   LOADER LOGO
========================================================== */

.loader-logo{

  width:74px;

  height:74px;

  position:relative;

  display:flex;

  align-items:center;

  justify-content:center;

  border-radius:24px;

  background:

    linear-gradient(

      180deg,

      rgba(255,255,255,.05),

      rgba(255,255,255,.02)

    );

  border:

    1px solid

    rgba(255,255,255,.06);

  box-shadow:

    var(--shadow-lg);

}


.loader-logo img{

  width:44px;

  height:44px;

  object-fit:contain;

}


/* ==========================================================
   PULSE RING
========================================================== */

.loader-ring{

  position:absolute;

  width:110px;

  height:110px;

  border-radius:50%;

  border:

    2px solid

    rgba(0,224,255,.08);

  border-top-color:

    var(--color-primary);

  animation:

    bloxioLoaderSpin

    1s

    linear

    infinite;

}


@keyframes bloxioLoaderSpin{

  from{

    transform:

      rotate(0deg);

  }

  to{

    transform:

      rotate(360deg);

  }

}


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

.loader-title{

  font-size:22px;

  font-weight:900;

  letter-spacing:.08em;

  color:

    var(--text);

  text-transform:uppercase;

  text-shadow:

    0 0 24px

    rgba(0,224,255,.18);

}


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

.loader-progress{

  width:min(240px,80vw);

  height:8px;

  overflow:hidden;

  border-radius:

    var(--radius-full);

  background:

    rgba(255,255,255,.06);

  border:

    1px solid

    rgba(255,255,255,.04);

}


.loader-progress-fill{

  width:0%;

  height:100%;

  border-radius:inherit;

  background:

    linear-gradient(

      90deg,

      #00e0ff,

      #22c55e

    );

  transition:

    width .22s linear;

  box-shadow:

    0 0 16px

    rgba(0,224,255,.25);

}


/* ==========================================================
   AUTH BLOCK
========================================================== */

body.auth-loading{

  overflow:hidden;

}


body.auth-loading *{

  pointer-events:none;

}


body.auth-ready *{

  pointer-events:auto;

}


/* ==========================================================
   PRELOAD SAFE HIDE
========================================================== */

body.app-preload .view{

  display:none !important;

}


body.app-ready .view.active{

  display:block;

}


/* ==========================================================
   VIDEO FREEZE SAFETY
========================================================== */

body.app-preload video{

  opacity:0;

  transition:

    opacity .4s ease;

}


body.app-ready video{

  opacity:1;

}


/* ==========================================================
   BACKGROUND FX LOCK
========================================================== */

body.app-preload .ambient-glow,

body.app-preload .grid-overlay,

body.app-preload .bg-layer{

  opacity:0;

}


body.app-ready .ambient-glow,

body.app-ready .grid-overlay,

body.app-ready .bg-layer{

  opacity:1;

  transition:

    opacity .5s ease;

}


/* ==========================================================
   ACCESSIBILITY
========================================================== */

@media (prefers-reduced-motion:reduce){

  .loader-ring{

    animation:none;

  }
}
/* ==========================================================================
   04 HEADER
   App Shell Header System
   Sticky + Blur + Mobile Safe + Brand Identity
   ========================================================================== */


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

.app-header{

  position:sticky;

  top:0;

  z-index:var(--z-header);

  width:100%;

  min-height:var(--header-height);

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:12px;

  padding:

    calc(
      12px +
      var(--safe-top)
    )

    16px

    12px;

  background:

    linear-gradient(

      180deg,

      rgba(11,15,20,.96),

      rgba(11,15,20,.92)

    );

  backdrop-filter:

    blur(
      var(--blur-md)
    );

  -webkit-backdrop-filter:

    blur(
      var(--blur-md)
    );

  border-bottom:

    1px solid

    var(--border);

  box-shadow:

    0 8px 24px
    rgba(0,0,0,.18);

  isolation:isolate;

  overflow:hidden;

}


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

.app-header::before{

  content:"";

  position:absolute;

  inset:-1px;

  background:

    linear-gradient(

      90deg,

      transparent,

      rgba(0,224,255,.08),

      transparent

    );

  opacity:.7;

  pointer-events:none;

}


.app-header::after{

  content:"";

  position:absolute;

  bottom:-40px;

  left:50%;

  transform:

    translateX(-50%);

  width:220px;

  height:90px;

  border-radius:50%;

  background:

    radial-gradient(

      circle,

      rgba(0,224,255,.08),

      transparent 70%

    );

  filter:

    blur(
      24px
    );

  pointer-events:none;

}


/* ==========================================================
   LOGO ROOT
========================================================== */

.logo{

  display:flex;

  align-items:center;

  gap:12px;

  min-width:0;

  flex:1;

}


/* ==========================================================
   LOGO IMAGE
========================================================== */

.logo img{

  width:40px;

  height:40px;

  flex-shrink:0;

  object-fit:contain;

  padding:4px;

  border-radius:

    var(--radius-md);

  background:

    linear-gradient(

      180deg,

      rgba(255,255,255,.04),

      rgba(255,255,255,.02)

    );

  border:

    1px solid

    rgba(255,255,255,.06);

  box-shadow:

    var(--shadow-sm);

}


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

.logo-text{

  display:flex;

  flex-direction:column;

  min-width:0;

}


.logo-text span{

  font-size:17px;

  font-weight:900;

  line-height:1;

  letter-spacing:-.03em;

  color:

    var(--text);

  white-space:nowrap;

}


.logo-text small{

  margin-top:4px;

  font-size:10px;

  font-weight:800;

  letter-spacing:.12em;

  text-transform:uppercase;

  color:

    var(--text-muted);

  white-space:nowrap;

}


/* ==========================================================
   SOCIAL ROOT
========================================================== */

.social-links{

  display:flex;

  align-items:center;

  gap:8px;

  flex-shrink:0;

}


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

.social-btn{

  width:42px;

  height:42px;

  display:flex;

  align-items:center;

  justify-content:center;

  border-radius:

    var(--radius-md);

  background:

    linear-gradient(

      180deg,

      rgba(255,255,255,.04),

      rgba(255,255,255,.02)

    );

  border:

    1px solid

    rgba(255,255,255,.06);

  box-shadow:

    var(--shadow-sm);

  transition:

    transform
    var(--speed-fast)
    var(--ease),

    border-color
    var(--speed-fast)
    var(--ease),

    background
    var(--speed-fast)
    var(--ease);

}


.social-btn:hover{

  transform:

    translateY(-1px);

  border-color:

    var(--border-active);

  background:

    rgba(
      0,
      224,
      255,
      .06
    );

}


.social-btn:active{

  transform:

    scale(.96);

}


.social-btn img{

  width:18px;

  height:18px;

  object-fit:contain;

}


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

body.header-compact .app-header{

  min-height:56px;

  padding-top:

    calc(
      8px +
      var(--safe-top)
    );

  padding-bottom:8px;

}


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

@media (max-width:480px){

  .app-header{

    padding-left:14px;

    padding-right:14px;

  }

  .logo img{

    width:36px;

    height:36px;

  }

  .logo-text span{

    font-size:16px;

  }

  .social-btn{

    width:38px;

    height:38px;

  }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion:reduce){

  .social-btn{

    transition:none;

  }
 }

/* ==========================================================================
   05 APP CONTAINER
   Application Shell Layout Engine
   Safe Bounds + Content Flow + PWA Stability
   ========================================================================== */

#app{

  position:relative;

  width:100%;

  isolation:isolate;

  z-index:var(--z-base);

}

/* ==========================================================
   MAIN CONTAINER
========================================================== */

.app-container{

  position:relative;

  width:100%;

  max-width:var(--content-max);

  margin-inline:auto;

  isolation:isolate;

  overflow:visible;

  padding-top:

    var(--space-3);

  padding-left:

    max(

      var(--space-4),

      var(--safe-left)

    );

  padding-right:

    max(

      var(--space-4),

      var(--safe-right)

    );

  padding-bottom:

    calc(

      var(--mobile-nav-height)

      +

      var(--safe-bottom)

      +

      20px

    );
}

/* ==========================================================
   CHILD FLOW
========================================================== */

.app-container>*{

  min-width:0;

  max-width:100%;

}


/* ==========================================================
   CONTENT SAFETY
========================================================== */

.app-container *{

  min-width:0;

  overflow-wrap:break-word;

}


.app-container code{

  word-break:break-all;

}


/* ==========================================================
   SAFE MEDIA
========================================================== */

.app-container img,

.app-container canvas,

.app-container svg,

.app-container video{

  max-width:100%;

}


/* ==========================================================
   PAGE FLOW
========================================================== */

.app-container .view{

  width:100%;

}


/* ==========================================================
   LOADER LOCK
========================================================== */

body.app-preload .app-container{

  opacity:0;

  pointer-events:none;

}


body.app-ready .app-container{

  opacity:1;

  transition:

    opacity

    .28s

    ease;

}


/* ==========================================================
   AUTH LOCK
========================================================== */

body.auth-loading .app-container{

  user-select:none;

}


/* ==========================================================
   STANDALONE PWA
========================================================== */

@media(

display-mode:standalone

){

  .app-container{

    padding-bottom:

      calc(

        var(--mobile-nav-height)

        +

        var(--safe-bottom)

        +

        28px

      );

  }

}


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

@media(

max-width:768px

){

  .app-container{

    padding-top:

      12px;

  }

}


@media(

max-width:480px

){

  .app-container{

    padding-left:

      max(

        14px,

        var(--safe-left)

      );

    padding-right:

      max(

        14px,

        var(--safe-right)

      );

  }

}


/* ==========================================================
   TABLET
========================================================== */

@media(

min-width:768px

){

  .app-container{

    padding-left:

      max(

        20px,

        var(--safe-left)

      );

    padding-right:

      max(

        20px,

        var(--safe-right)

      );

  }

}

/* ==========================================================
   LARGE SCREEN
========================================================== */

@media(

min-width:1800px

){

  .app-container{

    max-width:1800px;

  }

}

/* ==========================================================
   ACCESSIBILITY
========================================================== */

@media(

prefers-reduced-motion:reduce

){

  .app-container{

    transition:none;

  }
 }

/* ==========================================================================
   06 VIEW SYSTEM
   Application View State Engine
   Navigation + Visibility + Isolation
   ========================================================================== */

.view{

  position:relative;

  width:100%;

  min-width:0;

  display:none;

  visibility:hidden;

  opacity:0;

  pointer-events:none;

  overflow:visible;

  isolation:isolate;

}


/* ==========================================================
   ACTIVE VIEW
========================================================== */

.view.active{

  display:flex;

  flex-direction:column;

  visibility:visible;

  opacity:1;

  pointer-events:auto;

  animation:

    viewFade

    .22s

    ease;

}


/* ==========================================================
   HIDDEN STATE
========================================================== */

.view:not(.active){

  user-select:none;

}


/* ==========================================================
   ROOT MODULES
========================================================== */

#wallet,

#market,

#casino,

#mining,

#airdrop{

  width:100%;

  display:flex;

  flex-direction:column;

  gap:12px;

}


/* ==========================================================
   OVERFLOW SAFETY
========================================================== */

.view *{

  min-width:0;

}


.view img,

.view canvas,

.view svg,

.view video{

  max-width:100%;

}


/* ==========================================================
   PRELOAD
========================================================== */

body.app-preload .view{

  display:none !important;

}


body.app-ready .view.active{

  display:flex;

}


/* ==========================================================
   AUTH
========================================================== */

body.auth-loading .view{

  pointer-events:none;

}


/* ==========================================================
   PAGE SWITCH
========================================================== */

body.page-switching .view.active{

  opacity:.75;

}


/* ==========================================================
   EMPTY VIEW
========================================================== */

.view:empty{

  display:none;

}


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

@media(max-width:768px){

  .view{

    width:100%;

  }

}


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

@keyframes viewFade{

  from{

    opacity:0;

  }

  to{

    opacity:1;

  }

}


/* ==========================================================
   ACCESSIBILITY
========================================================== */

@media(prefers-reduced-motion:reduce){

  .view,

  .view.active{

    animation:none;

    transition:none;

  }
}

/* ==========================================================================
   07 GLOBAL CARD SYSTEM
   Universal Card Engine
   Wallet + Market + Mining + Casino + Panels
   ========================================================================== */

.card,
.mk-card,
.panel-card,
.stat-card{

  position:relative;

  overflow:hidden;

  isolation:isolate;

  border-radius:

    var(--radius-xl);

  background:

    linear-gradient(

      180deg,

      rgba(255,255,255,.03),

      rgba(255,255,255,.015)

    ),

    var(--surface-3);

  border:

    1px solid

    var(--border-soft);

  box-shadow:

    var(--shadow-lg);

  transition:

    transform

    var(--speed-fast)

    var(--ease),

    border-color

    var(--speed-fast)

    var(--ease),

    box-shadow

    var(--speed-fast)

    var(--ease),

    background

    var(--speed-fast)

    var(--ease);

}

/* ==========================================================
   CARD FX
========================================================== */

.card::before,
.mk-card::before,
.panel-card::before,
.stat-card::before{

  content:"";

  position:absolute;

  inset:-1px;

  border-radius:inherit;

  padding:1px;

  background:

    linear-gradient(

      135deg,

      rgba(0,224,255,.10),

      rgba(34,197,94,.08),

      rgba(255,255,255,.02)

    );

  opacity:.85;

  pointer-events:none;

  -webkit-mask:

    linear-gradient(#000 0 0)
    content-box,

    linear-gradient(#000 0 0);

  -webkit-mask-composite:xor;

  mask-composite:exclude;

}

/* ==========================================================
   CARD GLOW
========================================================== */

.card::after,
.mk-card::after,
.panel-card::after{

  content:"";

  position:absolute;

  right:-40px;

  bottom:-40px;

  width:160px;

  height:160px;

  border-radius:50%;

  background:

    radial-gradient(

      circle,

      rgba(0,224,255,.06),

      transparent 72%

    );

  filter:

    blur(20px);

  pointer-events:none;

}

/* ==========================================================
   INTERACTIVE CARD
========================================================== */

.card-interactive{

  cursor:pointer;

}


.card-interactive:hover{

  transform:

    translateY(-2px);

  border-color:

    rgba(

      0,

      224,

      255,

      .16

    );

  box-shadow:

    0 18px 38px

    rgba(0,0,0,.26);

}


.card-interactive:active{

  transform:

    scale(.99);

}

/* ==========================================================
   COMPACT CARD
========================================================== */

.card-compact{

  border-radius:

    var(--radius-lg);

  padding:

    var(--space-3);

}


/* ==========================================================
   LARGE CARD
========================================================== */

.card-large{

  padding:

    var(--space-5);

}

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

.card-glass{

  backdrop-filter:

    blur(

      var(--blur-md)

    );

  -webkit-backdrop-filter:

    blur(

      var(--blur-md)

    );

}

/* ==========================================================
   STATUS CARD
========================================================== */

.card-success{

  border-color:

    rgba(

      34,

      197,

      94,

      .20

    );

}


.card-danger{

  border-color:

    rgba(

      248,

      73,

      96,

      .18

    );

}


.card-warning{

  border-color:

    rgba(

      255,

      205,

      24,

      .18

    );

}

/* ==========================================================
   PANEL CARD
========================================================== */

.panel-card{

  padding:

    var(--space-4);

}

/* ==========================================================
   STAT CARD
========================================================== */

.stat-card{

  padding:

    14px;

  display:flex;

  flex-direction:column;

  gap:8px;

}


.stat-card span{

  font-size:12px;

  color:

    var(--text-muted);

  font-weight:800;

}

.stat-card strong{

  font-size:18px;

  font-weight:900;

  color:

    var(--text);

}

/* ==========================================================
   DISABLED
========================================================== */

.card-disabled{

  opacity:.55;

  pointer-events:none;

  filter:

    grayscale(.15);

}

/* ==========================================================
   LOADING CARD
========================================================== */

.card-loading{

  overflow:hidden;

}

.card-loading::before{

  content:"";

  position:absolute;

  inset:0;

  background:

    linear-gradient(

      90deg,

      transparent,

      rgba(255,255,255,.06),

      transparent

    );

  transform:

    translateX(-120%);

  animation:

    cardLoading

    1.5s

    linear

    infinite;

}

@keyframes cardLoading{

  to{

    transform:

      translateX(120%);

  }

}

/* ==========================================================
   SKELETON
========================================================== */

.skeleton{

  border-radius:

    var(--radius-md);

  background:

    linear-gradient(

      90deg,

      rgba(255,255,255,.04),

      rgba(255,255,255,.08),

      rgba(255,255,255,.04)

    );

  background-size:

    240%

    100%;

  animation:

    skeletonMove

    1.4s

    linear

    infinite;

}

@keyframes skeletonMove{

  from{

    background-position:

      100%

      0;

  }

  to{

    background-position:

      -100%

      0;
  }

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:480px){

  .card,
  .mk-card,
  .panel-card{

    border-radius:

      var(--radius-lg);

  }

}

/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion:reduce){

  .card,
  .mk-card,
  .panel-card{

    transition:none;

  }

  .skeleton{

    animation:none;

  }
}

/* ==========================================================================
   08 WALLET
   Wallet System Layer
   Hero + Intelligence + Actions + Panels + Assets + Toast
   ========================================================================== */

#wallet{

  --wallet-gap:12px;

  --wallet-panel-radius:
    var(--radius-xl);

  --wallet-row-height:58px;

  --wallet-action-height:44px;

  width:100%;

  display:flex;

  flex-direction:column;

  gap:var(--wallet-gap);

}

/* ==========================================================
   HERO
========================================================== */

#wallet .wallet-top{

  position:relative;

  overflow:hidden;

  padding:

    20px

    18px;

  border-radius:

    var(--radius-xl);

  background:

    radial-gradient(
      circle at top left,
      rgba(34,197,94,.12),
      transparent 24%
    ),

    radial-gradient(
      circle at top right,
      rgba(59,130,246,.10),
      transparent 28%
    ),

    linear-gradient(
      180deg,
      rgba(255,255,255,.03),
      rgba(255,255,255,.015)
    ),

    var(--surface-3);

  border:

    1px solid

    var(--border-soft);

  box-shadow:

    var(--shadow-lg);

}

#wallet .label{

  font-size:11px;

  color:

    var(--text-muted);

  text-transform:uppercase;

  letter-spacing:.08em;

}


#wallet h1{

  display:flex;

  align-items:flex-end;

  gap:8px;

  margin-top:8px;

}

#walletTotal{

  font-size:

    clamp(
      34px,
      8vw,
      52px
    );

  font-weight:900;

}


#wallet .wallet-status{

  margin-top:10px;

}

/* ==========================================================
   SMART BLOCK
========================================================== */

.wallet-intelligence{

  padding:

    var(--space-4);

  border-radius:

    var(--radius-xl);

  background:

    linear-gradient(
      180deg,
      rgba(255,255,255,.025),
      rgba(255,255,255,.01)
    ),

    var(--surface-3);

  border:

    1px solid

    var(--border-soft);

}

.wallet-intelligence-head{

  display:flex;

  justify-content:space-between;

  gap:12px;

}

.wallet-intel-actions{

  display:grid;

  grid-template-columns:

    repeat(
      2,
      minmax(0,1fr)
    );

  gap:8px;

}

.wallet-intel-btn{

  min-height:

    var(--wallet-action-height);

}

/* ==========================================================
   MAIN ACTIONS
========================================================== */

.wallet-actions{

  display:grid;

  grid-template-columns:

    repeat(
      3,
      1fr
    );

  gap:10px;

}

.wallet-actions .btn{

  min-height:

    var(--wallet-action-height);

}

/* ==========================================================
   PANEL SYSTEM
========================================================== */

.wallet-panels{

  display:flex;

  flex-direction:column;

  gap:10px;

}

.wallet-panel{

  padding:

    14px;

  border-radius:

    var(--wallet-panel-radius);

  background:

    linear-gradient(
      180deg,
      rgba(255,255,255,.03),
      rgba(255,255,255,.015)
    ),

    var(--surface-3);

  border:

    1px solid

    var(--border-soft);

}

.wallet-hidden{

  display:none !important;

}

.wallet-panel-head{

  display:flex;

  justify-content:space-between;

  align-items:center;

  margin-bottom:14px;

}

.wallet-panel-close{

  width:40px;

  height:40px;

}

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

.wallet-panel-body{

  display:flex;

  flex-direction:column;

  gap:10px;

}

.wallet-input,

.wallet-panel select,

.wallet-panel input{

  min-height:46px;

}

/* ==========================================================
   ADDRESS
========================================================== */

.wallet-address-box{

  padding:14px;

  border-radius:

    var(--radius-lg);

}

.wallet-address-box code{

  word-break:

    break-all;

}

/* ==========================================================
   BALANCES
========================================================== */

.wallet-balances{

  display:flex;

  flex-direction:column;

  gap:6px;

}

.wallet-assets-toolbar{

  margin-bottom:10px;

}

.wallet-row{

  min-height:

    var(--wallet-row-height);

  display:flex;

  align-items:center;

  justify-content:space-between;

  padding:

    10px;

  border-radius:

    var(--radius-lg);

  transition:

    transform

    var(--speed-fast)

    var(--ease);

}

.wallet-row:hover{

  transform:

    translateY(-1px);

}

.wallet-row img{

  width:34px;

  height:34px;

}

.wallet-row .left{

  display:flex;

  align-items:center;

  gap:10px;

}

.wallet-row .amount{

  font-weight:900;

}

.wallet-row.main{

  border:

    1px solid

    rgba(
      34,
      197,
      94,
      .18
    );

}

/* ==========================================================
   QUICK SHEET
========================================================== */

.wallet-quick-sheet{

  position:fixed;

  inset:0;

  z-index:

    var(--z-modal);

}

.wallet-quick-card{

  position:absolute;

  left:10px;

  right:10px;

  bottom:

    calc(
      var(--mobile-nav-height)
      +
      10px
    );

}

/* ==========================================================
   EMPTY STATE
========================================================== */

.wallet-empty{

  min-height:80px;

  display:grid;

  place-items:center;

}

/* ==========================================================
   TOAST
========================================================== */

.wallet-toast{

  position:fixed;

  left:50%;

  bottom:

    calc(

      var(--safe-bottom)

      +

      90px

    );

  transform:

    translateX(-50%);

}

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

@media (max-width:640px){

  .wallet-actions{

    gap:8px;

  }

  .wallet-row{

    min-height:62px;

  }

  .wallet-intel-actions{

    grid-template-columns:1fr;

  }

}

/* ==========================================================
   VERY SMALL DEVICES
========================================================== */

@media (max-width:380px){

  .wallet-actions{

    grid-template-columns:1fr;

  }

}

/* ==========================================================
   PERFORMANCE
========================================================== */

.wallet-row,

.wallet-panel,

.wallet-intelligence{

  contain:

    layout

    paint;

}

/* ==========================================================
   ACCESSIBILITY
========================================================== */

@media (prefers-reduced-motion:reduce){

  .wallet-row{

    transition:none;

  }
   }

/* ==========================================================================
   09 MARKET
   Trading Engine UI
   Pair Grid + Hero + Chart + Trade + Orderbook
   ========================================================================== */

.market-view{

  --market-gap:12px;

  --chart-height:420px;

  --pair-height:42px;

  display:flex;

  flex-direction:column;

  gap:var(--market-gap);

}

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

.market-header{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:12px;

}

.pair-title{

  display:flex;

  align-items:center;

  gap:4px;

}

.base{

  font-size:26px;

  font-weight:900;

}

.quote{

  color:var(--text-muted);

}


.price-box{

  text-align:right;

}

.price-main{

  font-size:24px;

  font-weight:900;

}

.approx{

  color:var(--text-muted);

  font-size:12px;

}

/* ==========================================================
   WALLET BOX
========================================================== */

.wallet-box{

  display:flex;

  justify-content:space-between;

  gap:10px;

  padding:12px;

}

/* ==========================================================
   PAIRS
========================================================== */

.pair-grid{

  display:grid;

  grid-template-columns:

    repeat(
      auto-fit,
      minmax(72px,1fr)
    );

  gap:8px;

}

.pair-btn{

  min-height:

    var(--pair-height);

  border-radius:

    var(--radius-lg);

  background:

    rgba(
      255,
      255,
      255,
      .03
    );

  border:

    1px solid

    var(--border-soft);

  font-weight:700;

  transition:

    all

    var(--speed-fast)

    var(--ease);

}

.pair-btn.active{

  background:

    rgba(
      0,
      224,
      255,
      .12
    );

  border-color:

    var(--border-active);

}

.pair-btn:hover{

  transform:

    translateY(-1px);

}

/* ==========================================================
   HERO
========================================================== */

.market-hero{

  display:flex;

  flex-direction:column;

  gap:12px;

}

.market-identity{

  display:flex;

  align-items:center;

  gap:12px;

}

.market-logo{

  width:54px;

  height:54px;

  border-radius:50%;

  display:grid;

  place-items:center;

  font-size:22px;

  font-weight:900;

}

.market-price{

  font-size:

    clamp(
      28px,
      5vw,
      44px
    );

  font-weight:900;

}

.market-change-badge{

  padding:

    6px

    10px;

  border-radius:

    var(--radius-full);

}

.is-up{

  color:

    var(--green);

}

.is-down{

  color:

    var(--red);

}

/* ==========================================================
   TOOLBAR
========================================================== */

.market-toolbar{

  display:flex;

  flex-wrap:wrap;

  justify-content:space-between;

  gap:12px;

}

.market-timeframes,

.market-chart-modes{

  display:flex;

  gap:8px;

}

.market-timeframes button,

.market-chart-modes button{

  min-height:38px;

  padding:

    0

    12px;

}

/* ==========================================================
   CHART
========================================================== */

.market-chart-card{

  position:relative;

  overflow:hidden;

  padding:14px;

  min-height:

    calc(

      var(--chart-height)

      +

      80px

    );

}

.market-chart-shell{

  position:relative;

  width:100%;

  height:

    var(--chart-height);

  overflow:hidden;

  border-radius:

    var(--radius-xl);

}

#marketChart{

  width:100%;

  height:100%;

  display:block;

}

.chart-overlay{

  position:absolute;

  inset:0;

  pointer-events:none;

}

.chart-glow{

  position:absolute;

  inset:auto;

  left:50%;

  bottom:-80px;

  transform:

    translateX(-50%);

  width:220px;

  height:220px;

  border-radius:50%;

  background:

    radial-gradient(

      circle,

      rgba(
        0,
        224,
        255,
        .10
      ),

      transparent

    );

}

.market-crosshair{

  position:absolute;

  right:12px;

  top:12px;

}

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

.market-chart-footer{

  display:grid;

  grid-template-columns:

    repeat(
      4,
      1fr
    );

  gap:10px;

}

.chart-footer-item{

  text-align:center;

}

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

.market-stats-grid{

  display:grid;

  grid-template-columns:

    repeat(
      4,
      1fr
    );

  gap:10px;

}

/* ==========================================================
   OHLC
========================================================== */

.market-ohlc{

  display:grid;

  grid-template-columns:

    repeat(
      5,
      1fr
    );

  gap:8px;

}

.ohlc-item{

  padding:10px;

}

/* ==========================================================
   TRADE BOX
========================================================== */

.trade-box{

  padding:14px;

}

.trade-tabs{

  display:grid;

  grid-template-columns:

    1fr

    1fr;

  gap:8px;

}

.trade-tabs button.active{

  background:

    rgba(
      0,
      224,
      255,
      .10
    );

}

.trade-form{

  display:flex;

  flex-direction:column;

  gap:12px;

}

.percent-row{

  display:grid;

  grid-template-columns:

    repeat(
      4,
      1fr
    );

  gap:8px;

}

.trade-stats{

  display:grid;

  gap:6px;

}

.action-btn{

  min-height:48px;

}

/* ==========================================================
   ORDERBOOK
========================================================== */

.orderbook-card{

  overflow:hidden;

}

.orderbook-head{

  display:flex;

  justify-content:space-between;

}

.ob-grid-head,

.ob-grid-body{

  display:grid;

  grid-template-columns:

    1fr

    1fr

    1fr;

}

.ob-grid-body{

  max-height:360px;

  overflow:auto;

}

/* ==========================================================
   PERFORMANCE
========================================================== */

.market-chart-card,

.trade-box,

.orderbook-card{

  contain:

    layout

    paint;

}

#marketChart{

  touch-action:none;

}


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

@media(max-width:768px){

  :root{

    --chart-height:280px;

  }

  .market-stats-grid{

    grid-template-columns:

      repeat(
        2,
        1fr
      );

  }

  .market-ohlc{

    grid-template-columns:

      repeat(
        2,
        1fr
      );

  }

}


@media(max-width:480px){

  .pair-grid{

    grid-template-columns:

      repeat(
        3,
        1fr
      );

  }

  .market-chart-footer{

    grid-template-columns:

      repeat(
        2,
        1fr
      );

  }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media(prefers-reduced-motion:reduce){

  .pair-btn{

    transition:none;

  }
 }

/* ==========================================================================
   10 CASINO
   Casino Engine UI
   Lobby + Games + Filters + Feed + Big Wins
   ========================================================================== */

#casino{

  --casino-gap:12px;

  --casino-card-min:150px;

  display:flex;

  flex-direction:column;

  gap:var(--casino-gap);

}


/* ==========================================================
   LOBBY
========================================================== */

#casinoLobby{

  display:flex;

  flex-direction:column;

  gap:12px;

}


/* ==========================================================
   TOPBAR
========================================================== */

.casino-topbar{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:12px;

}


.casino-brand-wrap{

  display:flex;

  align-items:center;

  gap:12px;

}


.casino-brand-badge{

  width:58px;

  height:58px;

  border-radius:50%;

  display:grid;

  place-items:center;

  font-size:26px;

  background:

    linear-gradient(
      180deg,
      rgba(255,255,255,.05),
      rgba(255,255,255,.02)
    );

  border:

    1px solid

    var(--border-soft);

}


.casino-title{

  font-size:24px;

  font-weight:900;

}


.casino-subtitle{

  color:

    var(--text-muted);

}


.casino-icon-btn{

  width:44px;

  height:44px;

}


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

.casino-stats-strip{

  display:grid;

  grid-template-columns:

    repeat(
      3,
      1fr
    );

  gap:10px;

}


.casino-stat-card{

  padding:14px;

  border-radius:

    var(--radius-lg);

}


.casino-stat-label{

  display:block;

  font-size:12px;

  color:

    var(--text-muted);

}


.casino-stat-card strong{

  font-size:18px;

  font-weight:900;

}


/* ==========================================================
   LIVE FEED
========================================================== */

.ticker-pulse-wrap{

  overflow:hidden;

  border-radius:

    var(--radius-lg);

}


.ticker-pulse-label{

  font-size:11px;

  font-weight:800;

  margin-bottom:8px;

}


.ticker-pulse-track{

  display:flex;

  gap:10px;

  overflow:auto;

  scrollbar-width:none;

}


.ticker-pulse-track::-webkit-scrollbar{

  display:none;

}


/* ==========================================================
   FILTERS
========================================================== */

.casino-filter-tabs{

  display:flex;

  gap:8px;

  overflow:auto;

  scrollbar-width:none;

}


.casino-filter-tabs::-webkit-scrollbar{

  display:none;

}


.casino-filter-tab{

  min-height:40px;

  padding:

    0

    14px;

  border-radius:

    var(--radius-full);

  white-space:nowrap;

}


.casino-filter-tab.active{

  background:

    rgba(
      0,
      224,
      255,
      .12
    );

  border:

    1px solid

    var(--border-active);

}


/* ==========================================================
   GAMES GRID
========================================================== */

#casinoGamesGrid{

  display:grid;

  grid-template-columns:

    repeat(
      auto-fill,
      minmax(
        var(--casino-card-min),
        1fr
      )
    );

  gap:12px;

}


.casino-game-card{

  position:relative;

  overflow:hidden;

  display:flex;

  flex-direction:column;

  gap:10px;

  padding:10px;

  min-height:190px;

  border-radius:

    var(--radius-xl);

  transition:

    transform

    var(--speed-fast)

    var(--ease);

}


.casino-game-card:hover{

  transform:

    translateY(-2px);

}


.casino-game-card:active{

  transform:

    scale(.98);

}


.casino-game-thumb{

  position:relative;

  overflow:hidden;

  border-radius:

    var(--radius-lg);

  aspect-ratio:

    1/.78;

}


.casino-game-thumb img{

  width:100%;

  height:100%;

  object-fit:cover;

}


.casino-game-meta{

  display:flex;

  flex-direction:column;

  gap:4px;

}


.casino-game-name{

  font-weight:900;

}


.casino-game-type{

  color:

    var(--text-muted);

  font-size:12px;

}


/* ==========================================================
   BIG WINS
========================================================== */

.big-wins{

  overflow:hidden;

}


.big-wins-title{

  margin-bottom:10px;

  font-weight:900;

}


.big-wins-track{

  display:flex;

  gap:10px;

  overflow:auto;

  scrollbar-width:none;

}


.big-wins-track::-webkit-scrollbar{

  display:none;

}


/* ==========================================================
   GAME VIEW
========================================================== */

#casinoGameView{

  width:100%;

  min-height:

    520px;

}


#casinoGameView.hidden{

  display:none;

}


/* ==========================================================
   GAME LOADING
========================================================== */

.casino-loading{

  opacity:.6;

  pointer-events:none;

}


/* ==========================================================
   GAME ERROR
========================================================== */

.casino-error{

  color:

    var(--red);

}


/* ==========================================================
   PERFORMANCE
========================================================== */

.casino-game-card,

.casino-stat-card{

  contain:

    layout

    paint;

}


.casino-game-thumb img{

  content-visibility:auto;

}


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

@media(max-width:768px){

  .casino-stats-strip{

    grid-template-columns:

      1fr;

  }

}


@media(max-width:480px){

  #casinoGamesGrid{

    grid-template-columns:

      repeat(
        2,
        1fr
      );

  }

  .casino-game-card{

    min-height:170px;

  }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media(prefers-reduced-motion:reduce){

  .casino-game-card{

    transition:none;

  }
}

/* ==========================================================================
   11 MINING
   Mining Engine UI
   Dashboard + Plans + Active Position + Subscribe + History
   ========================================================================== */

#mining{

  --mining-gap:12px;

  --plan-card-min:220px;

  display:flex;

  flex-direction:column;

  gap:var(--mining-gap);

}


/* ==========================================================
   HERO
========================================================== */

.mining-top{

  padding:18px;

}


.mining-top-head{

  display:flex;

  align-items:flex-start;

  justify-content:space-between;

  gap:16px;

}


.mining-top h2{

  font-size:28px;

  font-weight:900;

}


.mining-top p{

  color:var(--text-muted);

  margin-top:6px;

}


/* ==========================================================
   OVERVIEW
========================================================== */

.mining-overview-grid{

  display:grid;

  grid-template-columns:

    repeat(
      4,
      1fr
    );

  gap:10px;

  margin-top:18px;

}


.mining-stat{

  padding:14px;

  border-radius:

    var(--radius-lg);

  background:

    rgba(
      255,
      255,
      255,
      .02
    );

}


.mining-stat span{

  display:block;

  font-size:12px;

  color:

    var(--text-muted);

}


.mining-stat strong{

  display:block;

  margin-top:6px;

  font-size:18px;

  font-weight:900;

}


/* ==========================================================
   COINS
========================================================== */

.mining-tabs{

  display:flex;

  gap:10px;

  overflow:auto;

  scrollbar-width:none;

}


.mining-tabs::-webkit-scrollbar{

  display:none;

}


.mining-tabs button{

  min-width:90px;

  min-height:58px;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:8px;

  border-radius:

    var(--radius-lg);

}


.mining-tabs button img{

  width:22px;

  height:22px;

}


.mining-tabs button.active{

  background:

    rgba(
      0,
      224,
      255,
      .10
    );

  border:

    1px solid

    var(--border-active);

}


/* ==========================================================
   SHELL
========================================================== */

.mining-shell{

  display:grid;

  grid-template-columns:

    2fr

    1fr;

  gap:12px;

}


.mining-main-col,

.mining-side-col{

  min-width:0;

}


/* ==========================================================
   PLANS
========================================================== */

.mining-plans{

  display:grid;

  grid-template-columns:

    repeat(
      auto-fill,
      minmax(
        var(--plan-card-min),
        1fr
      )
    );

  gap:12px;

}


.mining-plan{

  padding:16px;

  border-radius:

    var(--radius-xl);

}


.mining-plan-title{

  font-weight:900;

}


.mining-plan-apr{

  color:

    var(--green);

  font-weight:900;

}


.mining-plan button{

  width:100%;

  margin-top:12px;

}


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

.mining-active-card{

  padding:16px;

}


.mining-active-head{

  display:flex;

  justify-content:space-between;

  gap:12px;

}


.mining-badge{

  padding:

    6px

    10px;

  border-radius:

    var(--radius-full);

  font-size:12px;

}


.mining-badge.idle{

  background:

    rgba(
      255,
      255,
      255,
      .06
    );

}


.mining-active-main{

  display:flex;

  flex-direction:column;

  gap:12px;

  margin-top:16px;

}


.mining-active-row{

  display:flex;

  justify-content:space-between;

}


.mining-active-row span{

  color:

    var(--text-muted);

}


.mining-active-row strong{

  font-weight:900;

}


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

.mining-progress-wrap{

  margin-top:18px;

}


.mining-progress-top{

  display:flex;

  justify-content:space-between;

}


.mining-progress-bar{

  height:10px;

  overflow:hidden;

  margin-top:8px;

  border-radius:

    var(--radius-full);

  background:

    rgba(
      255,
      255,
      255,
      .05
    );

}


#miningProgressFill{

  width:0%;

  height:100%;

  background:

    linear-gradient(

      90deg,

      #00e0ff,

      #22c55e

    );

  transition:

    width

    .4s

    ease;

}


.mining-progress-hint{

  margin-top:8px;

  color:

    var(--text-muted);

}


/* ==========================================================
   ACTIONS
========================================================== */

.mining-active-actions{

  display:grid;

  grid-template-columns:

    1fr

    1fr;

  gap:8px;

  margin-top:18px;

}


/* ==========================================================
   SUBSCRIBE
========================================================== */

.mining-sub-panel{

  padding:16px;

  border-radius:

    var(--radius-xl);

}


.mining-hidden{

  display:none !important;

}


.mining-sub-head{

  display:flex;

  justify-content:space-between;

}


.mining-panel-close{

  width:40px;

  height:40px;

}


.mining-sub-body{

  display:flex;

  flex-direction:column;

  gap:12px;

  margin-top:14px;

}


.mining-quick-row{

  display:grid;

  grid-template-columns:

    repeat(
      3,
      1fr
    );

  gap:8px;

}


.mining-sub-summary{

  padding:12px;

  border-radius:

    var(--radius-lg);

}


/* ==========================================================
   HISTORY
========================================================== */

.mining-history-card{

  padding:16px;

}


.mining-history-head{

  display:flex;

  justify-content:space-between;

}


.mining-history-list{

  display:flex;

  flex-direction:column;

  gap:10px;

  margin-top:14px;

}


.mining-history-item{

  padding:12px;

  border-radius:

    var(--radius-lg);

}


.mining-history-empty{

  color:

    var(--text-muted);

}


/* ==========================================================
   TOAST
========================================================== */

#miningToast{

  position:fixed;

  left:50%;

  bottom:

    calc(

      var(--safe-bottom)

      +

      90px

    );

  transform:

    translateX(-50%);

}


/* ==========================================================
   PERFORMANCE
========================================================== */

.mining-plan,

.mining-active-card,

.mining-history-card{

  contain:

    layout

    paint;

}


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

@media(max-width:980px){

  .mining-shell{

    grid-template-columns:

      1fr;

  }

}


@media(max-width:768px){

  .mining-overview-grid{

    grid-template-columns:

      repeat(
        2,
        1fr
      );

  }

}


@media(max-width:480px){

  .mining-active-actions{

    grid-template-columns:

      1fr;

  }

  .mining-overview-grid{

    grid-template-columns:

      1fr;

  }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media(prefers-reduced-motion:reduce){

  #miningProgressFill{

    transition:none;

  }
 }

/* ==========================================================================
   12 AIRDROP
   Reward + Referral + Tasks + TopUp + Partners
   ========================================================================== */

#airdrop{

  --airdrop-gap:12px;

  display:flex;

  flex-direction:column;

  gap:var(--airdrop-gap);

}


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

.airdrop-container{

  display:grid;

  gap:12px;

}


/* ==========================================================
   HERO
========================================================== */

.airdrop-box{

  position:relative;

  overflow:hidden;

  display:flex;

  flex-direction:column;

  align-items:center;

  text-align:center;

  gap:14px;

  padding:22px;

}


.airdrop-box img{

  width:82px;

  height:82px;

  object-fit:contain;

}


.airdrop-reward{

  font-size:

    clamp(
      28px,
      5vw,
      44px
    );

  font-weight:900;

  color:

    var(--color-primary);

}


.airdrop-status{

  color:

    var(--text-muted);

  font-size:13px;

}


.airdrop-action{

  min-width:220px;

  min-height:48px;

}


/* ==========================================================
   TASKS
========================================================== */

.airdrop-tasks{

  width:100%;

  display:flex;

  flex-direction:column;

  gap:10px;

}


.airdrop-task{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:10px;

  padding:12px;

  border-radius:

    var(--radius-lg);

  background:

    rgba(
      255,
      255,
      255,
      .02
    );

}


.airdrop-task.done{

  border:

    1px solid

    rgba(
      34,
      197,
      94,
      .20
    );

}


.airdrop-task-title{

  font-weight:700;

}


.airdrop-task-reward{

  color:

    var(--green);

  font-weight:900;

}


/* ==========================================================
   REFERRAL
========================================================== */

.airdrop-referral{

  padding:16px;

}


.airdrop-referral h3{

  margin-bottom:12px;

}


.referral-box{

  display:flex;

  gap:10px;

}


.ref-input{

  flex:1;

  min-height:48px;

}


#copyRefBtn{

  min-width:100px;

}


/* ==========================================================
   WHITEPAPER
========================================================== */

.airdrop-whitepaper{

  display:flex;

  justify-content:center;

}


.whitepaper-btn{

  min-width:220px;

}


/* ==========================================================
   PARTNERS
========================================================== */

.airdrop-partners{

  padding:16px;

}


.partners-grid{

  display:grid;

  grid-template-columns:

    repeat(
      auto-fit,
      minmax(
        100px,
        1fr
      )
    );

  gap:12px;

}


.partner-item{

  display:flex;

  align-items:center;

  justify-content:center;

  padding:16px;

  border-radius:

    var(--radius-lg);

  background:

    rgba(
      255,
      255,
      255,
      .02
    );

}


.partner-item img{

  max-width:80px;

  max-height:40px;

  object-fit:contain;

}


/* ==========================================================
   MINING CARD
========================================================== */

.min-card{

  overflow:hidden;

  text-align:center;

  padding:18px;

}


.min-card img{

  width:100%;

  max-height:180px;

  object-fit:cover;

  border-radius:

    var(--radius-lg);

}


.min-card h3{

  margin-top:14px;

}


.min-card p{

  color:

    var(--text-muted);

  margin-top:8px;

}


/* ==========================================================
   TOPUP
========================================================== */

.topup-card{

  padding:18px;

}


.topup-header{

  margin-bottom:14px;

}


.topup-header span{

  color:

    var(--text-muted);

}


.topup-body{

  display:flex;

  flex-direction:column;

  gap:10px;

}


.input-group{

  display:flex;

}


.input-group input{

  width:100%;

  min-height:48px;

}


.btn-confirm{

  min-height:50px;

}


.topup-message{

  min-height:22px;

  font-size:13px;

}


.topup-success{

  color:

    var(--green);

}


.topup-error{

  color:

    var(--red);

}


/* ==========================================================
   LOADING
========================================================== */

.airdrop-loading{

  opacity:.55;

  pointer-events:none;

}


/* ==========================================================
   EMPTY
========================================================== */

.airdrop-empty{

  text-align:center;

  color:

    var(--text-muted);

  padding:24px;

}


/* ==========================================================
   PERFORMANCE
========================================================== */

.airdrop-box,

.airdrop-referral,

.topup-card{

  contain:

    layout

    paint;

}


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

@media(max-width:768px){

  .referral-box{

    flex-direction:column;

  }

}


@media(max-width:480px){

  .partners-grid{

    grid-template-columns:

      repeat(
        2,
        1fr
      );

  }

  .airdrop-action{

    width:100%;

  }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media(prefers-reduced-motion:reduce){

  .airdrop-box{

    animation:none;

  }
 }

/* ==========================================================================
   13 MOBILE NAV
   Bottom Navigation System
   PWA + Safe Area + Active States + Mobile UX
   ========================================================================== */

.mobile-nav{

  position:fixed;

  left:0;

  right:0;

  bottom:0;

  z-index:

    var(--z-header);

  display:grid;

  grid-template-columns:

    repeat(
      5,
      1fr
    );

  align-items:center;

  gap:4px;

  min-height:

    var(--mobile-nav-height);

  padding:

    8px

    10px

    calc(
      8px +
      var(--safe-bottom)
    );

  background:

    linear-gradient(

      180deg,

      rgba(
        7,
        17,
        27,
        .92
      ),

      rgba(
        2,
        7,
        16,
        .96
      )

    );

  border-top:

    1px solid

    var(--border);

  backdrop-filter:

    blur(
      var(--blur-lg)
    );

  -webkit-backdrop-filter:

    blur(
      var(--blur-lg)
    );

  isolation:isolate;

  overflow:hidden;

}


/* ==========================================================
   FX
========================================================== */

.mobile-nav::before{

  content:"";

  position:absolute;

  left:0;

  right:0;

  top:0;

  height:1px;

  background:

    linear-gradient(

      90deg,

      transparent,

      rgba(
        0,
        224,
        255,
        .20
      ),

      transparent

    );

}


.mobile-nav::after{

  content:"";

  position:absolute;

  left:50%;

  bottom:-70px;

  transform:

    translateX(-50%);

  width:240px;

  height:120px;

  border-radius:50%;

  background:

    radial-gradient(

      circle,

      rgba(
        0,
        224,
        255,
        .08
      ),

      transparent

    );

  filter:

    blur(24px);

  pointer-events:none;

}


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

.nav-btn{

  position:relative;

  min-height:54px;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  gap:4px;

  border:none;

  border-radius:

    var(--radius-lg);

  background:transparent;

  color:

    var(--text-muted);

  font-size:11px;

  font-weight:700;

  letter-spacing:.02em;

  transition:

    background

    var(--speed-fast)

    var(--ease),

    color

    var(--speed-fast)

    var(--ease),

    transform

    var(--speed-fast)

    var(--ease);

  touch-action:

    manipulation;

  user-select:none;

  -webkit-user-select:none;

}


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

.nav-btn.active{

  color:

    var(--color-primary);

  background:

    rgba(
      0,
      224,
      255,
      .08
    );

}


.nav-btn.active::before{

  content:"";

  position:absolute;

  top:4px;

  width:18px;

  height:3px;

  border-radius:

    var(--radius-full);

  background:

    var(--color-primary);

  box-shadow:

    0 0 12px

    rgba(
      0,
      224,
      255,
      .35
    );

}


/* ==========================================================
   INTERACTION
========================================================== */

.nav-btn:hover{

  color:

    var(--text);

}


.nav-btn:active{

  transform:

    scale(.96);

}


.nav-btn:focus-visible{

  outline:

    2px solid

    var(--color-primary);

  outline-offset:2px;

}


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

.nav-btn span{

  overflow:hidden;

  text-overflow:ellipsis;

  white-space:nowrap;

}


/* ==========================================================
   LOADER LOCK
========================================================== */

body.app-preload .mobile-nav{

  opacity:0;

  pointer-events:none;

}


body.app-ready .mobile-nav{

  opacity:1;

  transition:

    opacity

    .30s

    ease;

}


/* ==========================================================
   AUTH LOCK
========================================================== */

body.auth-loading .mobile-nav{

  pointer-events:none;

}


/* ==========================================================
   STANDALONE
========================================================== */

@media (display-mode:standalone){

  .mobile-nav{

    padding-bottom:

      calc(

        10px

        +

        var(--safe-bottom)

      );

  }

}


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

@media(max-width:380px){

  .nav-btn{

    font-size:10px;

  }

}


/* ==========================================================
   TABLET
========================================================== */

@media(min-width:980px){

  .mobile-nav{

    max-width:720px;

    left:50%;

    transform:

      translateX(-50%);

    border-radius:

      22px

      22px

      0

      0;

  }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media(prefers-reduced-motion:reduce){

  .nav-btn{

    transition:none;

  }
 }

/* ==========================================================================
   14 PWA SAFE AREA
   Safe Insets + PWA Stability Layer
   Android + iPhone + WebView
   ========================================================================== */

:root{

  --safe-top:
    env(
      safe-area-inset-top,
      0px
    );

  --safe-bottom:
    env(
      safe-area-inset-bottom,
      0px
    );

  --safe-left:
    env(
      safe-area-inset-left,
      0px
    );

  --safe-right:
    env(
      safe-area-inset-right,
      0px
    );

}


/* ==========================================================
   ROOT FIX
========================================================== */

html{

  width:100%;

  min-height:100%;

  overflow-x:hidden;

  overflow-y:auto;

  -webkit-text-size-adjust:100%;

}


body{

  width:100%;

  min-height:100vh;

  min-height:100dvh;

  overflow-x:hidden;

  overflow-y:auto;

  touch-action:auto;

  overscroll-behavior-y:auto;

  -webkit-overflow-scrolling:touch;

}


/* ==========================================================
   APP ROOT
========================================================== */

#app{

  width:100%;

  overflow:visible;

  min-height:auto;

}


/* ==========================================================
   APP CONTAINER
========================================================== */

.app-container{

  padding-left:

    max(

      14px,

      var(--safe-left)

    );

  padding-right:

    max(

      14px,

      var(--safe-right)

    );

}


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

.app-header{

  padding-top:

    max(

      12px,

      var(--safe-top)

    );

}


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

.mobile-nav{

  padding-bottom:

    max(

      10px,

      var(--safe-bottom)

    );

}


/* ==========================================================
   SHEETS + MODALS
========================================================== */

.modal,

.sheet,

.dialog{

  padding-top:

    var(--safe-top);

  padding-bottom:

    var(--safe-bottom);

  padding-left:

    var(--safe-left);

  padding-right:

    var(--safe-right);

}


/* ==========================================================
   TOASTS
========================================================== */

.wallet-toast,

#miningToast{

  bottom:

    calc(

      90px

      +

      var(--safe-bottom)

    );

}


/* ==========================================================
   QUICK SHEETS
========================================================== */

.wallet-quick-card{

  bottom:

    calc(

      var(--mobile-nav-height)

      +

      var(--safe-bottom)

      +

      10px

    );

}


/* ==========================================================
   KEYBOARD SAFE
========================================================== */

body.keyboard-open .mobile-nav{

  opacity:0;

  pointer-events:none;

}


body.keyboard-open .wallet-toast,

body.keyboard-open #miningToast{

  opacity:0;

}


/* ==========================================================
   STANDALONE MODE
========================================================== */

@media(display-mode:standalone){

  body{

    overflow-y:auto;

  }

}


/* ==========================================================
   FULLSCREEN MODE
========================================================== */

@media(display-mode:fullscreen){

  body{

    overflow-y:auto;

  }

}


/* ==========================================================
   IOS FIX
========================================================== */

@supports(

padding:max(0px)

){

  .app-container{

    padding-left:

      max(

        14px,

        var(--safe-left)

      );

    padding-right:

      max(

        14px,

        var(--safe-right)

      );

  }

}


/* ==========================================================
   LANDSCAPE
========================================================== */

@media(

orientation:landscape

){

  .mobile-nav{

    min-height:60px;

  }

}


/* ==========================================================
   FALLBACK
========================================================== */

@supports not(

height:100dvh

){

  body{

    min-height:100vh;

  }

}


/* ==========================================================
   ACCESSIBILITY
========================================================== */

@media(

prefers-reduced-motion:reduce

){

  html{

    scroll-behavior:auto;

  }
}

/* ==========================================================================
   15 RESPONSIVE
   Responsive Engine Layer
   Mobile + Tablet + Desktop + Foldables + UltraWide
   ========================================================================== */

@media (min-width:1600px){

  .app-container{

    max-width:1800px;

  }

  .wallet-balances{

    grid-template-columns:

      repeat(
        2,
        1fr
      );

  }

  .market-shell{

    grid-template-columns:

      2fr
      420px;

  }

}


/* ==========================================================
   DESKTOP
========================================================== */

@media (max-width:1280px){

  :root{

    --content-max:1240px;

  }

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width:980px){

  .market-shell{

    grid-template-columns:

      1fr;

  }

  .mining-shell{

    grid-template-columns:

      1fr;

  }

  .market-side{

    order:2;

  }

  .market-main{

    order:1;

  }

  .wallet-actions{

    grid-template-columns:

      repeat(
        2,
        1fr
      );

  }

}


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

@media (max-width:768px){

  html{

    font-size:15px;

  }

  .app-header{

    padding-left:14px;

    padding-right:14px;

  }

  .wallet-top{

    padding:18px;

  }

  .market-stats-grid{

    grid-template-columns:

      repeat(
        2,
        1fr
      );

  }

  .market-ohlc{

    grid-template-columns:

      repeat(
        2,
        1fr
      );

  }

  .casino-stats-strip{

    grid-template-columns:

      1fr;

  }

  .mining-overview-grid{

    grid-template-columns:

      repeat(
        2,
        1fr
      );

  }

  .partners-grid{

    grid-template-columns:

      repeat(
        2,
        1fr
      );

  }

}


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

@media (max-width:480px){

  html{

    font-size:14px;

  }

  .app-container{

    padding-left:12px;

    padding-right:12px;

  }

  .wallet-actions{

    grid-template-columns:

      1fr;

  }

  .wallet-row{

    min-height:62px;

  }

  .pair-grid{

    grid-template-columns:

      repeat(
        3,
        1fr
      );

  }

  .market-chart-footer{

    grid-template-columns:

      repeat(
        2,
        1fr
      );

  }

  #casinoGamesGrid{

    grid-template-columns:

      repeat(
        2,
        1fr
      );

  }

  .mining-overview-grid{

    grid-template-columns:

      1fr;

  }

  .mining-active-actions{

    grid-template-columns:

      1fr;

  }

  .referral-box{

    flex-direction:column;

  }

}


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

@media (max-width:380px){

  html{

    font-size:13px;

  }

  .nav-btn{

    font-size:10px;

  }

  .wallet-actions{

    gap:6px;

  }

  .pair-grid{

    grid-template-columns:

      repeat(
        2,
        1fr
      );

  }

}


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

@media(

max-height:540px

)

and

(

orientation:landscape

){

  .mobile-nav{

    min-height:60px;

  }

  .wallet-top{

    padding:14px;

  }

  .market-chart-card{

    min-height:260px;

  }

}


/* ==========================================================
   TOUCH DEVICES
========================================================== */

@media(

hover:none

)

and

(

pointer:coarse

){

  .card:hover,

  .casino-game-card:hover,

  .wallet-row:hover,

  .pair-btn:hover{

    transform:none;

  }

}


/* ==========================================================
   FOLDABLES
========================================================== */

@media(

horizontal-viewport-segments:2

){

  .app-container{

    max-width:none;

  }

}


/* ==========================================================
   HIGH DPI
========================================================== */

@media(

min-resolution:2dppx

){

  img{

    image-rendering:auto;

  }

}


/* ==========================================================
   REDUCED DATA
========================================================== */

@media(

prefers-reduced-data:reduce

){

  video{

    display:none;

  }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media(

prefers-reduced-motion:reduce

){

  *{

    scroll-behavior:auto;

  }

}


/* ==========================================================
   PRINT
========================================================== */

@media print{

  .mobile-nav,

  .wallet-toast,

  #miningToast{

    display:none;

  }
 }

/* ==========================================================================
   16 ANIMATIONS
   Global Motion Engine
   Wallet + Market + Casino + Mining + Airdrop
   ========================================================================== */

:root{

  --motion-fast:.16s;

  --motion-normal:.28s;

  --motion-slow:.45s;

  --motion-extra:.70s;

  --ease-standard:

    cubic-bezier(
      .22,
      .61,
      .36,
      1
    );

  --ease-soft:

    cubic-bezier(
      .25,
      .10,
      .25,
      1
    );

  --ease-bounce:

    cubic-bezier(
      .34,
      1.56,
      .64,
      1
    );

}


/* ==========================================================
   FADE
========================================================== */

.anim-fade-in{

  animation:

    fadeIn

    var(--motion-normal)

    var(--ease-standard)

    both;

}


.anim-fade-out{

  animation:

    fadeOut

    var(--motion-fast)

    ease

    both;

}


@keyframes fadeIn{

  from{

    opacity:0;

  }

  to{

    opacity:1;

  }

}


@keyframes fadeOut{

  from{

    opacity:1;

  }

  to{

    opacity:0;

  }

}


/* ==========================================================
   SLIDE
========================================================== */

.anim-slide-up{

  animation:

    slideUp

    .32s

    var(--ease-standard)

    both;

}


.anim-slide-down{

  animation:

    slideDown

    .28s

    var(--ease-standard)

    both;

}


@keyframes slideUp{

  from{

    opacity:0;

    transform:

      translateY(16px);

  }

  to{

    opacity:1;

    transform:none;

  }

}


@keyframes slideDown{

  from{

    opacity:0;

    transform:

      translateY(-12px);

  }

  to{

    opacity:1;

    transform:none;

  }

}


/* ==========================================================
   SCALE
========================================================== */

.anim-scale{

  animation:

    scaleIn

    .22s

    var(--ease-bounce)

    both;

}


@keyframes scaleIn{

  from{

    opacity:0;

    transform:

      scale(.94);

  }

  to{

    opacity:1;

    transform:

      scale(1);

  }

}


/* ==========================================================
   FLOAT
========================================================== */

.anim-float{

  animation:

    floatMove

    4s

    ease-in-out

    infinite;

}


@keyframes floatMove{

  0%{

    transform:

      translateY(0px);

  }

  50%{

    transform:

      translateY(-6px);

  }

  100%{

    transform:

      translateY(0px);

  }

}


/* ==========================================================
   PULSE
========================================================== */

.anim-pulse{

  animation:

    pulse

    2s

    infinite;

}


@keyframes pulse{

  0%{

    opacity:1;

  }

  50%{

    opacity:.65;

  }

  100%{

    opacity:1;

  }

}


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

.anim-glow{

  animation:

    glowPulse

    2.5s

    ease-in-out

    infinite;

}


@keyframes glowPulse{

  0%{

    box-shadow:

      0 0 0

      rgba(
        0,
        224,
        255,
        0
      );

  }

  50%{

    box-shadow:

      0 0 24px

      rgba(
        0,
        224,
        255,
        .18
      );

  }

  100%{

    box-shadow:

      0 0 0

      rgba(
        0,
        224,
        255,
        0
      );

  }

}


/* ==========================================================
   LOADER
========================================================== */

.anim-spin{

  animation:

    spin

    1s

    linear

    infinite;

}


@keyframes spin{

  from{

    transform:

      rotate(0deg);

  }

  to{

    transform:

      rotate(360deg);

  }

}


/* ==========================================================
   SHIMMER
========================================================== */

.anim-shimmer{

  position:relative;

  overflow:hidden;

}


.anim-shimmer::after{

  content:"";

  position:absolute;

  inset:0;

  transform:

    translateX(-100%);

  background:

    linear-gradient(

      90deg,

      transparent,

      rgba(
        255,
        255,
        255,
        .08
      ),

      transparent

    );

  animation:

    shimmer

    1.5s

    linear

    infinite;

}


@keyframes shimmer{

  to{

    transform:

      translateX(100%);

  }

}


/* ==========================================================
   TOAST
========================================================== */

.toast-enter{

  animation:

    toastShow

    .22s

    var(--ease-bounce)

    both;

}


.toast-exit{

  animation:

    toastHide

    .18s

    ease

    both;

}


@keyframes toastShow{

  from{

    opacity:0;

    transform:

      translateY(18px)

      scale(.96);

  }

  to{

    opacity:1;

    transform:none;

  }

}


@keyframes toastHide{

  to{

    opacity:0;

    transform:

      translateY(12px);

  }

}


/* ==========================================================
   NUMBER UPDATE
========================================================== */

.anim-flash-green{

  animation:

    flashGreen

    .45s

    ease;

}


.anim-flash-red{

  animation:

    flashRed

    .45s

    ease;

}


@keyframes flashGreen{

  50%{

    color:

      var(--green);

  }

}


@keyframes flashRed{

  50%{

    color:

      var(--red);

  }

}


/* ==========================================================
   VIEW SWITCH
========================================================== */

.view.active{

  animation:

    viewOpen

    .24s

    var(--ease-standard);

}


@keyframes viewOpen{

  from{

    opacity:0;

  }

  to{

    opacity:1;

  }

}


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

.card,

.wallet-row,

.casino-game-card,

.mining-plan{

  transition:

    transform

    var(--motion-fast)

    var(--ease-standard),

    box-shadow

    var(--motion-fast)

    var(--ease-standard);

}


/* ==========================================================
   ACCESSIBILITY
========================================================== */

@media(prefers-reduced-motion:reduce){

  *,

  *::before,

  *::after{

    animation:none !important;

    transition:none !important;

    scroll-behavior:auto !important;

  }
}

/* ==========================================================================
   17 UTILITIES
   Atomic Utility Engine
   Reusable Helpers Layer
   ========================================================================== */

.d-none{

  display:none !important;

}

.d-block{

  display:block !important;

}

.d-inline{

  display:inline !important;

}

.d-inline-block{

  display:inline-block !important;

}

.d-flex{

  display:flex !important;

}

.d-grid{

  display:grid !important;

}


/* ==========================================================
   FLEX
========================================================== */

.flex-col{

  flex-direction:column !important;

}

.flex-wrap{

  flex-wrap:wrap !important;

}

.items-center{

  align-items:center !important;

}

.items-start{

  align-items:flex-start !important;

}

.items-end{

  align-items:flex-end !important;

}

.justify-center{

  justify-content:center !important;

}

.justify-between{

  justify-content:space-between !important;

}

.justify-end{

  justify-content:flex-end !important;

}

.flex-1{

  flex:1 !important;

}

.shrink-0{

  flex-shrink:0 !important;

}

.gap-1{

  gap:4px !important;

}

.gap-2{

  gap:8px !important;

}

.gap-3{

  gap:12px !important;

}

.gap-4{

  gap:16px !important;

}


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

.grid-2{

  grid-template-columns:

    repeat(
      2,
      1fr
    );

}

.grid-3{

  grid-template-columns:

    repeat(
      3,
      1fr
    );

}

.grid-4{

  grid-template-columns:

    repeat(
      4,
      1fr
    );

}


/* ==========================================================
   WIDTH
========================================================== */

.w-full{

  width:100% !important;

}

.h-full{

  height:100% !important;

}

.min-w-0{

  min-width:0 !important;

}


/* ==========================================================
   SPACING
========================================================== */

.p-1{

  padding:4px !important;

}

.p-2{

  padding:8px !important;

}

.p-3{

  padding:12px !important;

}

.p-4{

  padding:16px !important;

}

.p-5{

  padding:20px !important;

}

.m-0{

  margin:0 !important;

}

.mt-1{

  margin-top:4px !important;

}

.mt-2{

  margin-top:8px !important;

}

.mt-3{

  margin-top:12px !important;

}

.mt-4{

  margin-top:16px !important;

}

.mb-2{

  margin-bottom:8px !important;

}

.mb-3{

  margin-bottom:12px !important;

}

.mx-auto{

  margin-inline:auto !important;

}


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

.text-center{

  text-align:center !important;

}

.text-left{

  text-align:left !important;

}

.text-right{

  text-align:right !important;

}

.text-xs{

  font-size:12px !important;

}

.text-sm{

  font-size:14px !important;

}

.text-md{

  font-size:16px !important;

}

.text-lg{

  font-size:20px !important;

}

.text-xl{

  font-size:28px !important;

}

.font-700{

  font-weight:700 !important;

}

.font-900{

  font-weight:900 !important;

}

.uppercase{

  text-transform:uppercase !important;

}

.nowrap{

  white-space:nowrap !important;

}

.break-all{

  word-break:break-all !important;

}


/* ==========================================================
   COLORS
========================================================== */

.text-primary{

  color:var(--color-primary) !important;

}

.text-success{

  color:var(--green) !important;

}

.text-danger{

  color:var(--red) !important;

}

.text-muted{

  color:var(--text-muted) !important;

}

.bg-surface{

  background:var(--surface-3) !important;

}

.bg-glass{

  background:var(--glass) !important;

}


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

.border{

  border:

    1px solid

    var(--border) !important;

}

.border-soft{

  border:

    1px solid

    var(--border-soft) !important;

}

.rounded-sm{

  border-radius:

    var(--radius-sm) !important;

}

.rounded-lg{

  border-radius:

    var(--radius-lg) !important;

}

.rounded-xl{

  border-radius:

    var(--radius-xl) !important;

}

.round-full{

  border-radius:

    999px !important;

}


/* ==========================================================
   SHADOW
========================================================== */

.shadow-sm{

  box-shadow:

    var(--shadow-sm) !important;

}

.shadow-md{

  box-shadow:

    var(--shadow-md) !important;

}

.shadow-lg{

  box-shadow:

    var(--shadow-lg) !important;

}


/* ==========================================================
   POSITION
========================================================== */

.relative{

  position:relative !important;

}

.absolute{

  position:absolute !important;

}

.fixed{

  position:fixed !important;

}


/* ==========================================================
   OVERFLOW
========================================================== */

.overflow-hidden{

  overflow:hidden !important;

}

.overflow-auto{

  overflow:auto !important;

}

.scroll-x{

  overflow-x:auto !important;

}

.scroll-y{

  overflow-y:auto !important;

}


/* ==========================================================
   VISIBILITY
========================================================== */

.hidden{

  display:none !important;

}

.invisible{

  visibility:hidden !important;

}

.opacity-0{

  opacity:0 !important;

}

.opacity-50{

  opacity:.5 !important;

}

.opacity-100{

  opacity:1 !important;

}


/* ==========================================================
   INTERACTION
========================================================== */

.pointer{

  cursor:pointer !important;

}

.no-select{

  user-select:none !important;

}

.no-pointer{

  pointer-events:none !important;

}


/* ==========================================================
   PERFORMANCE
========================================================== */

.gpu{

  transform:

    translateZ(0);

}

.contain{

  contain:

    layout

    paint;

}


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

@media(max-width:768px){

  .mobile-hidden{

    display:none !important;

  }

}


@media(min-width:769px){

  .desktop-hidden{

    display:none !important;

  }
 }