/* ===============================
   GLOBAL BACKGROUND POLISH
================================ */
body{
  background: linear-gradient(135deg,#f4fff8,#ffffff);
  font-family: system-ui,-apple-system,sans-serif;
  margin:0;
  padding:0;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  width:350px;
  height:350px;
  background: radial-gradient(circle,#0f7a3d22,transparent 70%);
  top:-120px;
  right:-120px;
  z-index:-1;
}

/* ===== PREMIUM FLAT HEADER ===== */
.header{
  background:#0f7a3d;
  height:60px;
  padding:0 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* left side (logo + brand) */
.header-left{
  display:flex;
  align-items:center;
  gap:8px;
}

.main-logo{
  height:54px;
  width:auto;
}

.brand{
  font-size:15px;
  font-weight:700;
  letter-spacing:.5px;
}

/* hamburger */
.menu-icon{
  width:18px;
  height:13px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  cursor:pointer;
}

.menu-icon div{
  height:2px;
  background: linear-gradient(90deg,#ffffff,#c8f2de);
  border-radius:2px;
  box-shadow:0 0 6px rgba(255,255,255,0.6);
  transition:.3s ease;
}

.menu-icon:hover div{
  background: linear-gradient(90deg,#ffffff,#8de0b6);
  transform:scaleX(1.05);
}

/* ===============================
   WELCOME BAR
================================ */
.welcome-bar{
  background:#f4fff8;
  padding:8px 16px;
  overflow:hidden;
  white-space:nowrap;
}

.welcome-track{
  display:inline-block;
  padding-left:100%;
  animation:scrollWelcome 20s linear infinite;
  font-size:13px;
  color:#0f7a3d;
}

@keyframes scrollWelcome{
  0%{transform:translateX(0);}
  100%{transform:translateX(-100%);}
}

/* ===============================
   STATS
================================ */
.stats{
  display:flex;
  gap:12px;
  padding:16px;
}

.stat-card{
  flex:1;
  background:#ffffff;
  border-radius:12px;
  padding:10px 12px;
  box-shadow:0 6px 16px rgba(0,0,0,0.05);
  text-align:center;
}

.stat-card span{
  font-size:12px;
  color:#777;
}

.stat-card strong{
  display:block;
  font-size:14px;
  font-weight:700;
  color:#0f7a3d;
}

/* ===============================
   POPULAR PROJECTS
================================ */
.popular-section{
  padding:14px;
}

.popular-title{
  font-weight:700;
  margin-bottom:10px;
  font-size:15px;
}

.popular-scroll{
  display:flex;
  overflow-x:auto;
  gap:12px;
  scroll-snap-type:x mandatory;
  padding-bottom:6px;
}

.popular-card{
  min-width:30%;
  flex:0 0 30%;
  background: linear-gradient(145deg,#ffffff,#f2fff7);
  border-radius:14px;
  padding:10px 8px;
  box-shadow:0 6px 18px rgba(15,122,61,0.08);
  text-align:center;
  scroll-snap-align:start;
  cursor:pointer;
  transition:all .25s ease;
  position:relative;
}

.popular-card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 24px rgba(15,122,61,0.15);
}

.popular-icon{
  font-size:22px;
  margin-bottom:6px;
}

.popular-name{
  font-weight:600;
  font-size:12px;
  line-height:1.2;
}

.popular-amount{
  font-size:11px;
  color:#0f7a3d;
  margin-top:4px;
  font-weight:600;
}

.popular-card::after{
  content:attr(data-rank);
  position:absolute;
  top:6px;
  right:8px;
  font-size:9px;
  background:#0f7a3d;
  color:#fff;
  padding:2px 6px;
  border-radius:20px;
}

/* ===============================
   ASSETS – RECENT TRANSACTIONS STYLE
================================ */
.assets-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:16px;
}

.assets-search{
  font-size:18px;
  cursor:pointer;
  transition:.2s ease;
}

.assets-search:hover{
  transform:scale(1.1);
}

.asset-item{
  background:#fff;
  border-radius:12px;
  padding:12px 12px;
  margin-bottom:10px;
  display:flex;
  align-items:center;
  gap:12px;
  position:relative;
  box-shadow:0 6px 16px rgba(0,0,0,0.05);
  cursor:pointer;
  transition:all .25s ease;
}

.asset-item:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(0,0,0,0.08);
}

.asset-left{
  flex:1;
}

.asset-name{
  font-weight:600;
  font-size:14px;
}

.asset-stake{
  font-size:12px;
  color:#0f7a3d;
  margin-top:2px;
}

.asset-icon{
  width:32px;
  height:32px;
  border-radius:50%;
  background:#e6f6ec;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  flex-shrink:0;
}

/* ===============================
   SIDE DRAWER
================================ */
.side-drawer{
  position: fixed;
  top:0;
  right:-55%;
  width:50%;
  max-width:340px;
  height:100%;

  /* Premium glass */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.95),
    rgba(255,255,255,0.90)
  );

  /* Rounded Telegram edge */
  border-top-left-radius:22px;
  border-bottom-left-radius:22px;

  /* Soft green accent glow */
  box-shadow:
    -8px 0 28px rgba(0,0,0,0.08),
    -2px 0 0 rgba(15,122,61,0.15);

  transition: right 0.4s cubic-bezier(.22,.9,.24,1);
  z-index:1001;
  display:flex;
  flex-direction:column;
}

.side-drawer.open{
  right:0;
}
   
.side-drawer.open{
  right:0;
}

.drawer-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px;
  border-bottom:1px solid #eee;
  font-weight:700;
  background:#f4fff8;
}

.drawer-body{
  display:flex;
  flex-direction:column;
  padding:12px 16px;
  gap:10px;
}

.drawer-body a{
  text-decoration:none;
  color:#0f7a3d;
  font-weight:600;
  padding:8px 0;
  border-bottom:1px solid #eee;
}

.drawer-overlay{
  background: rgba(0,0,0,0.15);
  }

.drawer-overlay.show{
  opacity:1;
  visibility:visible;
}

.hidden-amount{
  filter: blur(6px);
  user-select:none;
}

/* ======================
   EXPLORE BUTTON (DASHBOARD)
====================== */
.explore-wrapper{
  padding:16px;
}

.action-btn{
  width:100%;
  padding:14px;
  border-radius:14px;
  text-align:center;
  font-weight:600;
  font-size:15px;
  background:var(--albukhr-green);
  color:#fff;
  cursor:pointer;

  box-shadow:0 4px 12px rgba(0,0,0,0.08);
  transition:0.2s;
}

.action-btn:active{
  transform:scale(0.98);
}
</style>
<style>
/* BLUE LEFT ACCENT ANIMATION */
.asset-item{
  position:relative;
  overflow:hidden;
}

.asset-item::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background: linear-gradient(180deg, #0f7a3d, #33c17d);
  animation:accentMove 2s ease-in-out infinite alternate;
}

@keyframes accentMove{
  0%{height:20%;}
  50%{height:80%;}
  100%{height:20%;}
}

/* ===============================
   DRAWER EXTENDED SECTIONS
================================ */

.drawer-extra{
  padding:0 16px 20px 16px;
}

/* SECTION TITLE */
.drawer-title{
  font-size:13px;
  font-weight:700;
  color:#0f7a3d;
  margin:16px 0 8px 0;
}

/* ===============================
   SOCIAL – HORIZONTAL
================================ */
.drawer-social{
  display:flex;
  gap:12px;
  overflow-x:auto;
  padding-bottom:6px;
}

.social-item{
  min-width:72px;
  text-align:center;
  text-decoration:none;
  color:#0f7a3d;
  font-size:11px;
  font-weight:600;
}

.social-icon{
width:42px;
height:42px;
border-radius:50%;
background:#e6f6ec;
display:flex;
align-items:center;
justify-content:center;
margin:auto;
margin-bottom:4px;
transition:.25s ease;
overflow:hidden;
}

.social-icon img{
width:24px;
height:24px;
object-fit:contain;
}

.social-item:hover .social-icon{
transform:translateY(-2px) scale(1.05);
background:#d9f4e7;
box-shadow:0 6px 14px rgba(15,122,61,0.15);
   }

/* ===============================
   POLICIES – VERTICAL
================================ */
.drawer-policy a{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:#0f7a3d;
  padding:8px 0;
  font-weight:600;
  border-bottom:1px solid #eee;
  font-size:13px;
}

.policy-icon{
  width:28px;
  height:28px;
  border-radius:8px;
  background:#e6f6ec;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
}

.drawer-note{
  font-size:11px;
  color:#777;
  margin-top:6px;
   }

.security-item{
  margin:8px 0;
  font-size:13px;
  font-weight:600;
}

.security-item input{
  margin-right:6px;
}  

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

.asset-progress{
  margin-top:6px;
  height:5px;
  background:#eef5f1;
  border-radius:10px;
  overflow:hidden;
  position:relative;
}

.asset-progress-bar{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,#0f7a3d,#33c17d);
  border-radius:10px;
  transition:width .6s ease;
}

/* subtle shine animation */
.asset-progress-bar::after{
  content:"";
  position:absolute;
  top:0;
  left:-40%;
  height:100%;
  width:40%;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.5),
    transparent
  );
  animation:progressShine 2.5s infinite;
}

@keyframes progressShine{
  0%{left:-40%;}
  100%{left:120%;}
   } 

/* ===============================
   ASSET PROGRESS ROW
================================ */

.asset-progress-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:6px;
}

.asset-progress{
  flex:1;
  height:5px;
  background:#eef5f1;
  border-radius:10px;
  overflow:hidden;
  position:relative;
}

.asset-progress-bar{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,#0f7a3d,#33c17d);
  border-radius:10px;
  transition:width .6s ease;
  position:relative;
}

.asset-progress-bar::after{
  content:"";
  position:absolute;
  top:0;
  left:-40%;
  height:100%;
  width:40%;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.5),
    transparent
  );
  animation:progressShine 2.5s infinite;
}

.asset-percent{
  font-size:11px;
  font-weight:600;
  color:#0f7a3d;
  min-width:34px;
  text-align:right;
}

@keyframes progressShine{
  0%{left:-40%;}
  100%{left:120%;}
   }

/* ===============================
ALBUKHR AI FLOATING
================================ */

.albukhr-ai-btn{

position:fixed;
right:18px;
bottom:95px;

width:56px;
height:56px;

border-radius:50%;

background:#fff;

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

box-shadow:0 8px 25px rgba(0,0,0,0.15);

z-index:1200;

cursor:pointer;

animation:aiFloat 3s ease-in-out infinite;

}

.albukhr-ai-logo{

width:42px;
height:42px;

}

/* floating animation */

@keyframes aiFloat{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-6px);
}

100%{
transform:translateY(0px);
}

}

/* glow pulse */

.albukhr-ai-btn::after{

content:"";

position:absolute;

width:100%;
height:100%;

border-radius:50%;

background:rgba(15,122,61,0.15);

animation:aiPulse 2s infinite;

z-index:-1;

}

@keyframes aiPulse{

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

100%{
transform:scale(1.5);
opacity:0;
}

}

.albukhr-ai-btn{

position:fixed;

right:18px;
bottom:95px;

width:56px;
height:56px;

border-radius:50%;

background:#fff;

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

box-shadow:0 8px 25px rgba(0,0,0,0.15);

z-index:2000;

cursor:grab;

touch-action:none;

}

.albukhr-ai-btn:active{
cursor:grabbing;
}

.albukhr-ai-btn{

position:fixed;

right:18px;
bottom:95px;

width:58px;
height:58px;

border-radius:50%;

background:#fff;

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

box-shadow:0 8px 25px rgba(0,0,0,0.18);

z-index:2000;

cursor:grab;

touch-action:none;

transition:
left .25s ease,
top .25s ease,
transform .25s ease;

}

.albukhr-ai-btn.minimized{

transform:scale(.85);
opacity:.8;

}

.albukhr-ai-logo{

width:40px;
height:40px;

animation:aiFloat 3s ease-in-out infinite;

}

@keyframes aiFloat{

0%{transform:translateY(0px);}
50%{transform:translateY(-5px);}
100%{transform:translateY(0px);}

 }

.ai-dev-note{

position:fixed;

right:20px;
bottom:160px;

background:#0f7a3d;
color:white;

padding:8px 12px;

border-radius:12px;

font-size:11px;

box-shadow:0 8px 20px rgba(0,0,0,0.15);

opacity:0;
transform:translateY(10px);

transition:.3s ease;

z-index:2000;

}

.ai-dev-note.show{

opacity:1;
transform:translateY(0);

}

.user-profile{
  display:flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
}

.avatar{
  width:32px;
  height:32px;
  border-radius:50%;
  background:#e6f6ec;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
}

.user-meta{
  display:flex;
  flex-direction:column;
  line-height:1;
}

.user-meta span{
  font-size:12px;
  font-weight:600;
}

.user-meta small{
  font-size:10px;
  color:#aaa;
}

.login-modal{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.4);
  z-index:5000;
  align-items:center;
  justify-content:center;
}

.login-card{
  background:#fff;
  padding:24px;
  border-radius:16px;
  text-align:center;
  width:80%;
  max-width:300px;
}

.login-btn{
  margin-top:16px;
  width:100%;
  padding:12px;
  border:none;
  border-radius:10px;
  background:#0f7a3d;
  color:#fff;
  font-weight:600;
  }