/* 1. IMPORT THE FONT "UNBOUNDED" */
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@200;300;400;500;600;700;800;900&display=swap');

:root {
    --bg-color: #050805;
    --text-white: #ffffff;
    --accent-green: #2ecc71;
    --card-bg: rgba(10, 20, 15, 0.7);
    --border-green: #1a3a2a;
    --glow-custom: rgba(56, 255, 126, 0.3); 
    --text-grey: #6A6A6A; 
    --text-light-green: #C0E4CD; 
    --profile-border: rgba(255, 255, 255, 0.15); 
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Unbounded', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

body {
    min-height: 100vh;
    display: flex;
    justify-content: flex-start; 
    flex-direction: column;
    color: var(--text-white);
    touch-action: manipulation;
    -webkit-text-size-adjust: 100%;
    overscroll-behavior: none;
    position: relative;
    background: #111111 url('/story-v2/bg-vec.svg') repeat;
    background-size: 300px auto;
    transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
    opacity: 1;
}
/* Background Noise: painted directly on html+body (no position:fixed layer)
   to avoid the iOS WebKit bug where fixed elements stop repainting during
   scroll/overscroll, leaving flat black below the fold */
html {
    min-height: 100%;
    background: #111111 url('/story-v2/bg-vec.svg') repeat;
    background-size: 300px auto;
}

body.fade-out {
    opacity: 0;
    transform: scale(0.98);
}

.dashboard-container {
    width: 100%;
    max-width: 420px; 
    margin: 0 auto;
    padding-bottom: 120px;
    position: relative; 
    z-index: 1; 
}

.profitbox{
  background: #111;
  border-radius: 13px;
  width: 112px;
  background-image: url('data:image/svg+xml,%3Csvg%20width%3D%22112%22%20height%3D%22101%22%20viewBox%3D%220%200%20112%20101%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20x%3D%228%22%20y%3D%2274%22%20width%3D%2292%22%20height%3D%221%22%20fill%3D%22url(%23paint0_linear_5690_50)%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22paint0_linear_5690_50%22%20x1%3D%2297.5001%22%20y1%3D%2275.0001%22%20x2%3D%2258.8823%22%20y2%3D%22117.322%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23FFC74F%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23FFC74F%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  p{
    font-size: 7px;font-weight: 300;display: flex;justify-content: space-between;margin-top: auto;width: 100%;color: #4E4E4E;
        padding: 8px 9px;
    span{  color: #FFC74F; }
  }
  cursor: pointer;
}

/* --- Header --- */
.dash-header {
    padding: 0;
      margin-top: 80px; 
    margin-bottom: 50px; 
}

.welcome-text {
    margin-top: 80px; 
    margin-left: 37px; 
    width: 310px; 
    font-family: 'Unbounded', sans-serif; 
    font-size: 20px; 
    line-height: 0.6; 
    letter-spacing: 0; 
    text-align: left;
    margin-bottom: 25px; 
}

.line-bold {
    font-weight: 600; 
    display: block;
    color: var(--text-light-green);
    margin-bottom: 0px; 
}

.line-regular {
    font-family: 'Unbounded', sans-serif;
    font-weight: 200; 
    display: block;
    color: var(--text-light-green);
}

.brand-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-logo {
    height: 94px;
    margin: auto;
    width: auto;
    object-fit: contain;
    display: block;
}

/* --- Cards Common --- */
.card {
    background-color: #080f0b; 
    border: 1px solid #15251d; 
    border-radius: 30px; 
    padding: 20px;
    margin-top: 10px; 
    margin-bottom: 35px; 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    margin-left: 20px; 
    margin-right: 20px;
}

.balance-card {
    background: linear-gradient(#1F1F1F, #2C2C2C);
  border-radius: 14px;
  border: none;
  box-shadow: none;
  backdrop-filter: unset;
  -webkit-backdrop-filter: none;
  padding: 12px;
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  max-width: 341px;
    margin-bottom: 7px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.card-label {
    color: #B5B5B5;
    font-size: 15px;
    font-weight: 500;
}

.details-link {
    color: #6A6A6A;
    text-decoration: none;
    font-size: 14px;
}

/* --- ANIMATIONS --- */
@keyframes pulse-glow {
    0% { box-shadow: inset 0 0 10px var(--glow-custom), 0 0 5px var(--glow-custom); border-color: #2ecc71; }
    50% { box-shadow: inset 0 0 20px var(--glow-custom), 0 0 15px var(--glow-custom); border-color: #4aff92; }
    100% { box-shadow: inset 0 0 10px var(--glow-custom), 0 0 5px var(--glow-custom); border-color: #2ecc71; }
}

/* --- GLOWING BALANCE BOX --- */
.balance-display-box {
    width: 200px;
  height: 101px;
  background: #111;
  border-radius: 7px;
  display: flex;
  justify-content: center;
  align-items: center;
}


/* --- ANIMATION: Slide Up --- */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


    .chart-container {
      position: absolute;
      width: 112px;
      height: 101px;
    }
    .wipe-layer {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .flat-layer {
      animation: wipeOut 0.7s ease-in-out forwards;
    }
    .flat-layer svg {
      position: absolute;
      left: 8px; 
      top: 73.5px; 
    }
    .curve-layer {
      animation: wipeIn 0.7s ease-in-out forwards;
    }
    @keyframes wipeIn {
      0% { clip-path: inset(0 100% 0 0); }
      100% { clip-path: inset(0 0 0 0); }
    }
    @keyframes wipeOut {
      0% { clip-path: inset(0 0 0 0); }
      100% { clip-path: inset(0 0 0 100%); }
    }
@keyframes slideUp1 {
    from {
        opacity: 0;
        transform: translateY(60px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp2 {
    from {
        opacity: 0;
        transform: translateY(70px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes slideUp3 {
    from {
        opacity: 0;
        transform: translateY(80px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-slide-up {
    animation: slideUp 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}



.balance-amount {
    font-size: 32px;
    font-weight: 700; 

    background: linear-gradient( #FFF08E, #FF991D);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    
    /* Ensure no animation is affecting the text transform */
    transform: none;
    opacity: 1;
}

.balance-cents {
    font-weight: 500; /* Optional: Makes cents slightly thinner than dollars */
}

/* --- Profile Card --- */
.profile-card {
    cursor: pointer;
    display: flex;
  align-items: center;
  gap: 20px;
  padding-left: 0;
  position: relative;
  flex-direction: column;
  max-width: 165px;
  background: linear-gradient(#1F1F1F, #2C2C2C);
  border: none;
  border-radius: 14px;
  justify-content: center;
  padding: 16px;
    min-width: 165px;
    margin: 0;  max-height: 200px;
}

.boxlow{
    max-width: 341px;
    min-height: 200px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 7px;  margin: auto;  max-height: 200px;
}

.buyboxes{
    display: flex;
    flex-direction: column;
    gap: 7px;
    justify-content: space-between;
    height: 100%;
    width: 100%;
}
.boxes {
    width: 100%;
    display: flex;flex-direction: row;background: linear-gradient(#1F1F1F, #2C2C2C);border-radius: 14px;min-height: 133px; 
}

.buybtn {
    background: linear-gradient( #FFF08E, #FF991D);width: 100%;height: 60px;border-radius: 14px;color: #111;font-weight: 700;font-size: 15px;display: flex;justify-content: center;text-align: center;
    cursor: pointer;
}
.buybtn p{
    user-select: none;
    margin: auto;
}

.boxes-amount {
    width: 100%;background: url('/images/fold1.svg') no-repeat left top;padding: 16px;justify-content: flex-end;display: flex;flex-direction: column;
    h1{
        font-weight: 700;font-size: 76px;line-height: 80px;width: min-content;
    }
    p{
        font-weight: 600;font-size: 13px;width: min-content;
    }
}

.profile-icon-box {
    width: 110px; 
    height: 110px; 
    background: transparent; 
    border: none;
    box-shadow: none;
    position: relative; 
    margin-left: -10px; 
    margin-right: 10px;
    flex-shrink: 0;
}

.user-avatar {
    width: 140%;
    height: 170%;
    object-fit: contain; 
    position: relative; 
    top: 0;
    left: 50%;
    transform: translate(-47%, -20%) rotate(0deg);
    z-index: 10;
}

.profile-info {
    display: flex;
    flex-direction: row;
    padding: 0;
    justify-content: space-between;
    width: 100%;
}

.username {
    font-size: 11px;
  font-weight: 600;
  color: #fff;
}

.user-id {font-size: 8px;
  font-weight: 400;
  color: #6A6A6A;
}

.profile-btn {
    background: url('/images/dashnext.svg');
  border: none;
  padding: 12px 0;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  width: 27px;
  text-align: center;
  height: 27px;
}


/* --- Bottom Navigation (Universal) --- */
.bottom-nav {
   position: fixed;
  bottom: calc(30px + env(safe-area-inset-bottom));
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 380px;
  background: linear-gradient(#1F1F1F, #2C2C2C);
  border-radius: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;  
  padding: 0px 24px;
  height: 61px;
  z-index: 100;
  
}

.bottom-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  padding: 1px;
  background: linear-gradient( to bottom, rgba(255, 255, 255, 0.16), rgba(153, 153, 153, 0) );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.55);
    text-decoration: none;
    padding: 12px;
    border-radius: 30px; /* Always pill shape */
        gap: 8px;
    height: 100%;
    
svg {
    fill: rgba(255,255,255, 0.25);
    transition: all 0.35s ease;
  }
  span{
    transition: all 0.35s ease;
    display: none;
  }
}

.nav-item.active {
    background: linear-gradient( #FFF08E, #FF991D);
  color: white;
  padding: 12px 24px;
  border-radius: 14px;
  z-index: 101;
  min-width: 169px;

  svg {
    fill: #111;
    
    transition: all 0.35s ease;
  }
  span{
    
    transition: all 0.35s ease;
    display: inline-block;
  }
  
}

/* --- IMAGE ICONS STYLING (NEW) --- */
.nav-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    transition: all 0.35s ease;
}


/* --- TEXT SLIDE ANIMATION --- */
.nav-item span {

   color: #111;
  font-weight: 500;
  font-size: 13px;
    transition: all 0.35s ease;
}