:root{
--bg:#f4f7ff;
--card:#ffffffef;
--text:#0f172a;
--light:#64748b;

--primary:#2962ff;
--secondary:#00c6ff;

--shadow:0 12px 35px rgba(0,0,0,.08);
}

body.dark{
--bg:#06101d;
--card:#101b2df2;
--text:#fff;
--light:#94a3b8;
--shadow:0 15px 40px rgba(0,0,0,.35);
}

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
-webkit-tap-highlight-color:transparent;
}

body{
background:var(--bg);
color:var(--text);
min-height:100vh;
overflow-x:hidden;
padding-bottom:120px;
position:relative;
}

/* =========================
   DISABLE SELECT
========================= */

.no-select{
-webkit-user-select:none;
user-select:none;
-webkit-touch-callout:none;
}

/* =========================
   BG EFFECT
========================= */

body::before{
content:"";
position:fixed;
top:-100px;
left:-100px;
width:260px;
height:260px;
background:#2962ff33;
filter:blur(90px);
border-radius:50%;
z-index:-1;
}

body::after{
content:"";
position:fixed;
bottom:-100px;
right:-100px;
width:260px;
height:260px;
background:#00c6ff22;
filter:blur(100px);
border-radius:50%;
z-index:-1;
}

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

.header{
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 16px;
}

.profile{
display:flex;
align-items:center;
gap:12px;
}

.profile img{
width:52px;
height:52px;
border-radius:50%;
object-fit:cover;
border:2px solid rgba(255,255,255,.2);
}

.profile h3{
font-size:16px;
font-weight:700;
}

.profile p{
font-size:12px;
color:var(--light);
margin-top:2px;
}

.header-actions{
display:flex;
gap:10px;
}

.icon-btn{
width:44px;
height:44px;
border-radius:16px;
background:var(--card);
display:flex;
align-items:center;
justify-content:center;
backdrop-filter:blur(18px);
box-shadow:var(--shadow);
cursor:pointer;
font-size:18px;
border:1px solid rgba(255,255,255,.08);
transition:.2s;
}

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

/* =========================
   BALANCE
========================= */

.balance-card{
margin:0 16px;
padding:24px;
border-radius:30px;
background:linear-gradient(135deg,#2962ff,#00c6ff);
position:relative;
overflow:hidden;
box-shadow:0 18px 45px rgba(41,98,255,.35);
}

.balance-card::before{
content:"";
position:absolute;
top:-50px;
right:-50px;
width:170px;
height:170px;
background:rgba(255,255,255,.13);
border-radius:50%;
}

.balance-card::after{
content:"";
position:absolute;
bottom:-60px;
left:-60px;
width:170px;
height:170px;
background:rgba(255,255,255,.09);
border-radius:50%;
}

.balance-row{
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
position:relative;
z-index:2;
}

.balance-card small{
color:#e2e8f0;
}

.balance-card h1{
font-size:36px;
font-weight:800;
color:#fff;
margin-top:10px;
}

.add-fund-btn{
height:40px;
padding:0 15px;
border:none;
border-radius:14px;
background:rgba(255,255,255,.17);
backdrop-filter:blur(12px);
display:flex;
align-items:center;
gap:7px;
color:#fff;
font-size:12px;
font-weight:700;
cursor:pointer;
}

.add-fund-btn svg{
width:15px;
height:15px;
}
.refer-icon svg{
width:32px;
height:32px;
}
/* =========================
   GRID
========================= */

.grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:14px;
padding:18px 16px;
}

.card{
background:var(--card);
padding:18px;
border-radius:26px;
backdrop-filter:blur(20px);
box-shadow:var(--shadow);
cursor:pointer;
border:1px solid rgba(255,255,255,.08);
transition:.2s;
position:relative;
overflow:hidden;
min-height:140px;
}

.card::before{
content:"";
position:absolute;
top:-40px;
right:-40px;
width:120px;
height:120px;
background:rgba(41,98,255,.06);
border-radius:50%;
}

.card:active{
transform:scale(.96);
}

.icon{
width:52px;
height:52px;
border-radius:17px;
background:linear-gradient(135deg,#2962ff,#00c6ff);
display:flex;
align-items:center;
justify-content:center;
position:relative;
z-index:2;
box-shadow:0 10px 25px rgba(41,98,255,.28);
}

.icon svg{
width:23px;
height:23px;
stroke:#fff;
}

.card h3{
margin-top:14px;
font-size:14px;
font-weight:700;
position:relative;
z-index:2;
}

.card p{
margin-top:5px;
font-size:11px;
line-height:1.5;
color:var(--light);
position:relative;
z-index:2;
}

/* =========================
   REFER
========================= */

.refer-wrap{
padding:0 16px 15px;
}

.refer-card{
background:var(--card);
padding:18px;
border-radius:26px;
display:flex;
gap:14px;
align-items:center;
backdrop-filter:blur(18px);
box-shadow:var(--shadow);
border:1px solid rgba(255,255,255,.08);
}

.refer-icon{
width:68px;
height:68px;
border-radius:22px;
background:linear-gradient(135deg,#ffb300,#ff6f00);
display:flex;
align-items:center;
justify-content:center;
font-size:28px;
}

.refer-btn{
margin-top:12px;
padding:10px 16px;
border-radius:13px;
background:linear-gradient(135deg,#2962ff,#00c6ff);
color:#fff;
font-size:12px;
font-weight:700;
width:max-content;
cursor:pointer;
}

/* =========================
   ORDERS
========================= */

.orders{
padding:0 16px;
}

.orders h2{
margin-bottom:16px;
font-size:20px;
}

.order-card{
background:var(--card);
padding:18px;
border-radius:24px;
margin-bottom:14px;
backdrop-filter:blur(18px);
box-shadow:var(--shadow);
border:1px solid rgba(255,255,255,.08);
}

.order-top{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:12px;
gap:10px;
}

.status{
padding:6px 12px;
border-radius:30px;
font-size:11px;
font-weight:700;
color:#fff;
text-transform:capitalize;
}

.completed{
background:linear-gradient(135deg,#22c55e,#16a34a);
}

.pending{
background:linear-gradient(135deg,#f59e0b,#fbbf24);
}

.processing{
background:linear-gradient(135deg,#3b82f6,#2563eb);
}

.progress{
height:8px;
background:rgba(41,98,255,.12);
border-radius:20px;
overflow:hidden;
margin-top:14px;
}

.progress span{
display:block;
height:100%;
background:linear-gradient(90deg,#2962ff,#00c6ff);
}

/* =========================
   HELP
========================= */

.help-btn{
position:fixed;
right:18px;
bottom:98px;
width:56px;
height:56px;
border-radius:50%;
background:linear-gradient(135deg,#25d366,#128c7e);
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 12px 30px rgba(37,211,102,.35);
z-index:99999;
cursor:pointer;
}

.help-btn svg{
width:27px;
height:27px;
fill:#fff;
}

/* =========================
   NAVBAR
========================= */

/* =========================
   PREMIUM NAVBAR
========================= */

.bottom-nav{
position:fixed;
bottom:14px;
left:50%;
transform:translateX(-50%);

width:92%;
max-width:430px;

padding:12px 10px;

border-radius:30px;

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

z-index:9999;
overflow:hidden;

background:
rgba(255,255,255,.92);

backdrop-filter:blur(24px);

border:1px solid rgba(255,255,255,.35);

box-shadow:
0 14px 40px rgba(0,0,0,.12);
}

.bottom-nav::before{
content:"";

position:absolute;

top:-40px;
left:50%;

transform:translateX(-50%);

width:85%;
height:90px;

background:
linear-gradient(
135deg,
rgba(41,98,255,.18),
rgba(0,198,255,.12)
);

filter:blur(35px);

border-radius:50%;

z-index:-1;
}

.dark .bottom-nav{
background:
rgba(17,28,46,.94);

border:1px solid rgba(255,255,255,.06);

box-shadow:
0 15px 40px rgba(0,0,0,.35);
}

.nav-item{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;

gap:4px;

min-width:58px;

font-size:10px;
font-weight:600;

color:#64748b;

cursor:pointer;

transition:.18s;

position:relative;
}

.dark .nav-item{
color:#94a3b8;
}

.nav-item svg{
width:20px;
height:20px;

stroke:currentColor;
}

.nav-item.active{
color:#2962ff;
}

.nav-item.active::before{
content:"";

position:absolute;

top:-8px;

width:42px;
height:42px;

border-radius:50%;

background:
radial-gradient(
rgba(41,98,255,.22),
transparent 70%
);

z-index:-1;
}

.nav-item:active{
transform:scale(.92);
}
/* =========================


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

@keyframes pulse{
0%{opacity:.5;}
50%{opacity:1;}
100%{opacity:.5;}
}

.skeleton{
background:#dbeafe;
border-radius:12px;
animation:pulse 1.2s infinite;
}

.no-order{
text-align:center;
padding:24px;
color:var(--light);
}

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

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

padding:
18px
16px
10px;

position:relative;
z-index:5;
}

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

.profile{
display:flex;
align-items:center;

gap:12px;
}

/* AVATAR */

.profile img{
width:52px;
height:52px;

border-radius:18px;

object-fit:cover;

border:
2px solid rgba(255,255,255,.12);

box-shadow:
0 10px 24px rgba(0,0,0,.12);
}

/* TEXT */

.profile h3{
font-size:16px;
font-weight:800;

letter-spacing:-0.3px;
}

.profile p{
margin-top:2px;

font-size:11px;

color:var(--light);
}

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

.header-actions{
display:flex;
align-items:center;

gap:10px;
}

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

.icon-btn{
position:relative;

width:44px;
height:44px;

border-radius:16px;

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

background:
rgba(255,255,255,.08);

backdrop-filter:blur(18px);

border:
1px solid rgba(255,255,255,.08);

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

cursor:pointer;

overflow:hidden;

transition:.18s;
}

/* LIGHT EFFECT */

.icon-btn::before{
content:"";

position:absolute;

top:-25px;
left:-40px;

width:28px;
height:90px;

background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.45),
transparent
);

transform:rotate(25deg);

animation:btnShine 3s linear infinite;
}

@keyframes btnShine{

0%{
left:-40px;
}

100%{
left:140%;
}

}

/* ICON */

.icon-btn svg{
width:18px;
height:18px;

stroke:var(--text);

position:relative;
z-index:2;
}

/* EMOJI */

.icon-btn span{
position:relative;
z-index:2;

font-size:18px;
}

/* CLICK */

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

/* LOGOUT RED */

.logout-btn{
background:
rgba(255,77,77,.10);

border:
1px solid rgba(255,77,77,.12);
}

.logout-btn svg{
stroke:#ff4d4d;
}

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

.dark .icon-btn{
background:
rgba(255,255,255,.06);

border:
1px solid rgba(255,255,255,.05);
}
.icon-btn{
width:42px;
height:42px;
border-radius:14px;
display:flex;
align-items:center;
justify-content:center;
background:var(--card);
border:1px solid var(--border);
cursor:pointer;
transition:.18s;
}

.icon-btn svg{
width:22px;
height:22px;
display:block;
color:var(--text);
}

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

.icon-btn::before{
display:none !important;
animation:none !important;
content:none !important;
}

.notify-btn{
position:relative;
overflow:visible !important;
flex-shrink:0;
}

.notify-count{
position:absolute;
top:2px;
right:2px;

min-width:16px;
height:16px;
padding:0 4px;

border-radius:999px;

background:#ef4444;
color:#fff;

font-size:9px;
font-weight:800;
line-height:16px;

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

z-index:5;

border:2px solid var(--card);
box-shadow:0 3px 8px rgba(239,68,68,.28);

animation:none !important;
transform:none !important;
}

@keyframes notifyPulse{
0%{transform:none;}
50%{transform:none;}
100%{transform:none;}
}

.notify-dropdown{
position:absolute;
top:72px;
right:14px;

width:300px;
max-width:calc(100vw - 28px);

background:var(--card);

border:1px solid rgba(255,255,255,.10);

border-radius:22px;

backdrop-filter:blur(24px);

box-shadow:
0 20px 50px rgba(0,0,0,.18);

z-index:999999;

padding:12px;

opacity:0;
pointer-events:none;

transform:translateY(-10px) scale(.96);
transform-origin:top right;

transition:.22s ease;
}

.notify-dropdown.show{
opacity:1;
pointer-events:auto;
transform:translateY(0) scale(1);
}

.notify-dropdown::before{
content:"";
position:absolute;
top:-7px;
right:48px;
width:14px;
height:14px;
background:var(--card);
border-left:1px solid rgba(255,255,255,.10);
border-top:1px solid rgba(255,255,255,.10);
transform:rotate(45deg);
}

.notify-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;

padding:4px 4px 10px;

border-bottom:1px solid rgba(148,163,184,.15);
}

.notify-head span{
font-size:14px;
font-weight:800;
}

.notify-head small{
font-size:10px;
font-weight:700;
color:var(--light);
}

.notify-list{
max-height:280px;
overflow:auto;
padding-top:8px;
}

.notify-list::-webkit-scrollbar{
display:none;
}

.notify-item{
padding:11px;
border-radius:16px;
margin-bottom:8px;

background:rgba(41,98,255,.06);

border:1px solid rgba(41,98,255,.10);

cursor:pointer;

transition:.18s;
}

.notify-item:active{
transform:scale(.98);
}

.notify-item.unread{
background:rgba(41,98,255,.09);
border-color:rgba(41,98,255,.22);
}

.notify-item.read{
opacity:.68;
}

.notify-title{
font-size:12px;
font-weight:800;
margin-bottom:4px;
color:var(--text);
}

.notify-msg{
font-size:11px;
line-height:1.45;
color:var(--light);
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}

.notify-meta{
margin-top:7px;
display:flex;
justify-content:space-between;
align-items:center;
gap:8px;
}

.notify-date{
font-size:9px;
color:var(--light);
}

.notify-read-text{
font-size:10px;
font-weight:800;
color:#2962ff;
white-space:nowrap;
}

.notify-empty{
padding:18px 8px;
text-align:center;
font-size:12px;
color:var(--light);
}
/* FIX NOTIFICATION ICON + BADGE */
.notify-btn{
width:42px !important;
height:42px !important;
min-width:42px !important;
max-width:42px !important;
position:relative !important;
overflow:visible !important;
flex:0 0 42px !important;
}

.notify-btn svg{
width:22px !important;
height:22px !important;
position:relative;
z-index:2;
}

.notify-btn::before{
display:none !important;
content:none !important;
animation:none !important;
}

.notify-count{
position:absolute !important;
top:-4px !important;
right:-4px !important;

min-width:18px !important;
height:18px !important;
padding:0 5px !important;

border-radius:20px !important;
background:#ef4444 !important;
color:#fff !important;

font-size:9px !important;
font-weight:800 !important;
line-height:18px !important;

display:none;
align-items:center !important;
justify-content:center !important;

z-index:10 !important;

border:2px solid var(--card) !important;
box-shadow:0 4px 10px rgba(239,68,68,.30) !important;

animation:none !important;
transform:none !important;
}

.notify-count{
font-family:'Poppins',sans-serif !important;
}
/* READ MORE LINK */

.notify-msg.expanded{
display:block !important;
-webkit-line-clamp:unset !important;
-webkit-box-orient:unset !important;
overflow:visible !important;
}

.notify-read-more{
margin-top:6px;
display:inline-block;
font-size:11px;
font-weight:800;
color:#2962ff;
cursor:pointer;
}

.notify-read-more:active{
opacity:.7;
}

/* POPUP */

.notify-popup{
position:fixed;
inset:0;
display:none;
align-items:center;
justify-content:center;
padding:18px;
background:rgba(0,0,0,.75);
backdrop-filter:blur(10px);
z-index:9999999;
}

.notify-popup.show{
display:flex;
}

.notify-popup-box{
width:100%;
max-width:360px;
background:var(--card);
border-radius:24px;
padding:20px;
box-shadow:0 20px 50px rgba(0,0,0,.3);
border:1px solid rgba(255,255,255,.08);
animation:notifyPopupScale .18s ease;
}

@keyframes notifyPopupScale{
from{
transform:scale(.9);
opacity:0;
}
to{
transform:scale(1);
opacity:1;
}
}

.notify-popup-box h3{
font-size:17px;
font-weight:800;
margin-bottom:12px;
color:var(--text);
word-break:break-word;
}

#popupMessage{
font-size:13px;
line-height:1.7;
color:var(--light);
max-height:320px;
overflow:auto;
word-break:break-word;
}

#popupMessage::-webkit-scrollbar{
width:4px;
}

#popupMessage::-webkit-scrollbar-thumb{
background:#2962ff;
border-radius:10px;
}

.notify-popup-close{
width:100%;
height:44px;
margin-top:18px;
border:none;
border-radius:14px;
background:linear-gradient(135deg,#2962ff,#00c6ff);
color:#fff;
font-size:13px;
font-weight:700;
cursor:pointer;
}

.notify-popup-close:active{
transform:scale(.97);
}

.balance-low{
color:#e2b4b4 !important;
}
.notification-overlay{
position:fixed;
inset:0;

background:rgba(0,0,0,.35);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);

z-index:999998;

opacity:0;
pointer-events:none;

transition:.25s;
}

.notification-overlay.show{
opacity:1;
pointer-events:auto;
}

.notify-dropdown{
z-index:999999;
}
.notify-toast{
position:fixed;
top:18px;
left:50%;
transform:translateX(-50%) translateY(-120px);

width:calc(100% - 32px);
max-width:380px;

background:linear-gradient(135deg,#2962ff,#00c6ff);
color:#fff;

border-radius:20px;
padding:14px 15px;

z-index:99999999;

box-shadow:0 18px 40px rgba(41,98,255,.35);

opacity:0;
pointer-events:none;

transition:.35s ease;
}

.notify-toast.show{
opacity:1;
transform:translateX(-50%) translateY(0);
}

.notify-toast-title{
font-size:13px;
font-weight:800;
margin-bottom:4px;
}

.notify-toast-msg{
font-size:11px;
line-height:1.45;
opacity:.92;

white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.avatar-ring{
position:relative;
width:58px;
height:58px;
border-radius:20px;
display:flex;
align-items:center;
justify-content:center;
}

.avatar-ring::before{
content:"";
position:absolute;
inset:-2px;
border-radius:22px;
z-index:0;

background:linear-gradient(135deg,#06d6a0,#00c6ff);

animation:ringGradient 8s linear infinite;
}

@keyframes ringGradient{
0%{
filter:hue-rotate(0deg);
}
100%{
filter:hue-rotate(360deg);
}
}

.avatar-ring img{
position:relative;
z-index:2;
width:52px;
height:52px;
border-radius:18px;
object-fit:cover;
background:var(--card);
}

@keyframes ringColor{
0%   { background:#06d6a0; } /* Green */
20%  { background:#00c6ff; }
40%  { background:#3a86ff; }
60%  { background:#8338ec; }
80%  { background:#ff006e; }
100% { background:#06d6a0; }
}
.profile-info{
display:flex;
align-items:center;
}

.welcome-card{
padding:7px 10px;

border-radius:14px;

background:linear-gradient(
135deg,
rgba(255,255,255,.12),
rgba(255,255,255,.04)
);

backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);

border:1px solid rgba(255,255,255,.10);

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

min-width:120px;

position:relative;
overflow:hidden;
}

.welcome-card::before{
content:"";

position:absolute;

top:-20px;
right:-20px;

width:60px;
height:60px;

border-radius:50%;

background:rgba(41,98,255,.15);

filter:blur(20px);
}

.dark .welcome-card{
background:linear-gradient(
135deg,
rgba(255,255,255,.08),
rgba(255,255,255,.03)
);

border:1px solid rgba(255,255,255,.06);
}

.welcome-top{
display:flex;
align-items:center;
gap:6px;

position:relative;
z-index:2;
}

.welcome-dot{
width:6px;
height:6px;

border-radius:50%;

background:linear-gradient(
135deg,
#2962ff,
#00c6ff
);

box-shadow:
0 0 10px rgba(41,98,255,.7);
}

.welcome-label{
font-size:9px;
font-weight:700;

color:var(--light);

text-transform:uppercase;

letter-spacing:.6px;
}

#userName{
margin-top:4px;

font-size:13px;
font-weight:800;

line-height:1.2;

max-width:120px;

white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;

background:linear-gradient(
135deg,
#2962ff,
#00c6ff
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

letter-spacing:.2px;

position:relative;
z-index:2;
}

.dark #userName{
background:linear-gradient(
135deg,
#ffffff,
#60a5fa,
#00c6ff
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

#themeIcon svg{
width:20px;
height:20px;
transition:.35s ease;
}

#themeIcon:active svg{
transform:rotate(180deg) scale(.9);
}

#themeIcon svg{
width:20px;
height:20px;
transition:transform .5s ease;
}

body.dark #themeIcon svg{
transform:rotate(180deg);
}


.icon-btn svg{
width:22px;
height:22px;
display:block;
}

/* BG */

.logout-popup{
position:fixed;
inset:0;
display:none;
align-items:center;
justify-content:center;
padding:16px;
background:rgba(0,0,0,.72);
backdrop-filter:blur(12px);
z-index:999999;
animation:fadePopup .2s ease;
}

.logout-popup.show{
display:flex;
}

@keyframes fadePopup{
from{opacity:0;}
to{opacity:1;}
}

/* BOX */

.logout-box{
width:100%;
max-width:290px;
background:var(--card);
border-radius:24px;
padding:18px 16px 16px;
position:relative;
overflow:hidden;
border:1px solid rgba(255,255,255,.08);
box-shadow:0 20px 50px rgba(0,0,0,.35);
animation:scalePopup .2s ease;
}

@keyframes scalePopup{
from{
transform:scale(.88) translateY(14px);
opacity:0;
}
to{
transform:scale(1) translateY(0);
opacity:1;
}
}

/* GLOW */

.logout-box::before{
content:"";
position:absolute;
top:-70px;
left:50%;
transform:translateX(-50%);
width:170px;
height:170px;
border-radius:50%;
background:linear-gradient(135deg,#ff4d4d,#ff0000);
opacity:.12;
filter:blur(55px);
}

/* LABEL */

.logout-label{
display:flex;
align-items:center;
gap:6px;
font-size:10px;
font-weight:700;
color:#ff4d4d;
text-transform:uppercase;
margin-bottom:12px;
letter-spacing:.4px;
position:relative;
z-index:2;
}

.logout-dot{
width:7px;
height:7px;
border-radius:50%;
background:#ff4d4d;
box-shadow:0 0 10px rgba(255,77,77,.7);
}

/* ICON */

.logout-icon{
width:66px;
height:66px;
margin:auto;
border-radius:20px;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,#ff4d4d,#ff0000);
box-shadow:0 12px 24px rgba(255,0,0,.25);
position:relative;
z-index:2;
}

.logout-icon svg{
width:26px;
height:26px;
stroke:#fff;
}

/* TEXT */

.logout-content{
text-align:center;
position:relative;
z-index:2;
}

.logout-content h2{
margin-top:14px;
font-size:18px;
font-weight:800;
}

.logout-content p{
margin-top:6px;
font-size:11px;
line-height:1.6;
color:var(--light);
}

/* BUTTONS */

.logout-actions{
display:flex;
gap:8px;
margin-top:16px;
position:relative;
z-index:2;
}

.cancel-btn,
.logout-confirm{
flex:1;
height:42px;
border:none;
border-radius:12px;
font-size:12px;
font-weight:700;
cursor:pointer;
}

.cancel-btn{
background:rgba(120,120,120,.12);
color:var(--text);
}

.logout-confirm{
background:linear-gradient(135deg,#ff4d4d,#ff0000);
color:#fff;
box-shadow:0 8px 20px rgba(255,0,0,.25);
}

.cancel-btn:active,
.logout-confirm:active{
transform:scale(.96);
}

/* =========================
   BALANCE CARD
========================= */

.balance-card{
margin:0 16px;

padding:20px 18px;

border-radius:28px;

background:
linear-gradient(
135deg,
#2962ff,
#00c6ff
);

position:relative;
overflow:hidden;

box-shadow:
0 18px 40px rgba(41,98,255,.30);
}

/* GLOW */

.balance-card::before{
content:"";

position:absolute;

top:-60px;
right:-60px;

width:160px;
height:160px;

border-radius:50%;

background:
rgba(255,255,255,.12);
}

.balance-card::after{
content:"";

position:absolute;

bottom:-70px;
left:-70px;

width:160px;
height:160px;

border-radius:50%;

background:
rgba(255,255,255,.08);
}

/* ROW */

.balance-row{
display:flex;
justify-content:space-between;
align-items:center;

gap:12px;

position:relative;
z-index:2;
}

/* TEXT */

.balance-info small{
font-size:11px;

color:#dbeafe;

letter-spacing:.3px;
}

.balance-info h1{
margin-top:6px;

font-size:28px;
font-weight:800;

color:#fff;

letter-spacing:-0.5px;
}

/* =========================
   ADD FUND BUTTON
========================= */

.add-fund-btn{
position:relative;

overflow:hidden;

height:38px;

padding:0 14px;

border:none;

border-radius:14px;

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

gap:6px;

background:
rgba(255,255,255,.15);

backdrop-filter:blur(14px);

border:
1px solid rgba(255,255,255,.16);

color:#fff;

font-size:11px;
font-weight:700;

cursor:pointer;

box-shadow:

inset 0 1px 1px rgba(255,255,255,.18),

0 8px 20px rgba(0,0,0,.12);

transition:.18s;
}

/* ICON */

.add-fund-btn svg{
width:14px;
height:14px;

position:relative;
z-index:2;
}

/* TEXT */

.add-fund-btn span{
position:relative;
z-index:2;
}

/* SHINE EFFECT */

.btn-shine{
position:absolute;

top:-30px;
left:-60px;

width:40px;
height:100px;

background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.45),
transparent
);

transform:rotate(25deg);

animation:shineMove 2.6s linear infinite;
}

@keyframes shineMove{

0%{
left:-60px;
}

100%{
left:160%;
}

}

/* HOVER */

.add-fund-btn:hover{

transform:
translateY(-1px);

box-shadow:

inset 0 1px 1px rgba(255,255,255,.18),

0 10px 22px rgba(41,98,255,.20);
}

/* CLICK */

.add-fund-btn:active{
transform:scale(.95);
}
/* =========================
   POPUP BG
========================= */

.premium-popup{
position:fixed;
inset:0;

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

padding:16px;

background:rgba(0,0,0,.72);

backdrop-filter:blur(12px);

z-index:999999;

animation:popupFade .22s ease;
}

.premium-popup.show{
display:flex;
}

@keyframes popupFade{

from{
opacity:0;
}

to{
opacity:1;
}

}

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

.premium-box{
width:100%;
max-width:300px;

background:var(--card);

border-radius:26px;

position:relative;
overflow:hidden;

padding:
18px
16px
16px;

border:1px solid rgba(255,255,255,.08);

box-shadow:
0 22px 55px rgba(0,0,0,.35);

animation:popupScale .2s ease;
}

@keyframes popupScale{

from{

transform:
scale(.88)
translateY(16px);

opacity:0;

}

to{

transform:
scale(1)
translateY(0);

opacity:1;

}

}

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

.premium-box::before{
content:"";

position:absolute;

top:-80px;
left:50%;

transform:translateX(-50%);

width:180px;
height:180px;

border-radius:50%;

background:
linear-gradient(
135deg,
#2962ff,
#00c6ff
);

opacity:.14;

filter:blur(60px);
}

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

.popup-label{
display:flex;
align-items:center;

gap:6px;

font-size:11px;
font-weight:700;

color:#ff4d4d;

margin-bottom:14px;

letter-spacing:.3px;

text-transform:uppercase;
}

.popup-label-dot{
width:8px;
height:8px;

border-radius:50%;

background:#ff4d4d;

box-shadow:
0 0 10px rgba(255,77,77,.7);
}

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

.popup-close-btn{
position:absolute;

top:10px;
right:10px;

width:30px;
height:30px;

border-radius:50%;

background:rgba(255,255,255,.08);

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

cursor:pointer;

transition:.15s;

z-index:5;
}

.popup-close-btn svg{
width:14px;
height:14px;

stroke:var(--text);
}

.popup-close-btn:active{
transform:scale(.92);
}

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

.popup-icon{
width:72px;
height:72px;

margin:auto;

border-radius:22px;

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

background:
linear-gradient(
135deg,
#2962ff,
#00c6ff
);

box-shadow:
0 12px 26px rgba(41,98,255,.28);

position:relative;
z-index:2;

animation:floatIcon 3s ease-in-out infinite;
}

@keyframes floatIcon{

0%{
transform:translateY(0);
}

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

100%{
transform:translateY(0);
}

}

.popup-icon svg{
width:30px;
height:30px;

stroke:#fff;
}

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

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

.popup-content h2{
margin-top:14px;

font-size:19px;
font-weight:800;

letter-spacing:-0.3px;
}

.popup-content p{
margin-top:6px;

font-size:11px;
line-height:1.6;

color:var(--light);
}

/* =========================
   FEATURES
========================= */

.popup-features{
margin-top:14px;

display:flex;
flex-direction:column;

gap:7px;
}

.feature-item{
height:38px;

border-radius:12px;

background:rgba(41,98,255,.06);

display:flex;
align-items:center;

padding:0 12px;

font-size:11px;
font-weight:600;

color:var(--text);

gap:8px;
}

.feature-dot{
width:7px;
height:7px;

border-radius:50%;

background:
linear-gradient(
135deg,
#2962ff,
#00c6ff
);
}

/* =========================
   BUTTONS
========================= */

.popup-actions{
display:flex;

gap:8px;

margin-top:16px;
}

.popup-later{
flex:1;

height:42px;

border:none;

border-radius:12px;

background:rgba(120,120,120,.12);

color:var(--text);

font-size:12px;
font-weight:700;

cursor:pointer;
}

.popup-upgrade{
flex:1;

height:42px;

border:none;

border-radius:12px;

background:
linear-gradient(
135deg,
#2962ff,
#00c6ff
);

color:#fff;

font-size:12px;
font-weight:700;

cursor:pointer;

box-shadow:
0 8px 20px rgba(41,98,255,.3);
}

.popup-later:active,
.popup-upgrade:active{
transform:scale(.96);
}

/* =========================
   CHECKBOX
========================= */

.popup-check{
margin-top:12px;

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

gap:7px;

font-size:11px;

color:var(--light);
}

.popup-check input{
width:14px;
height:14px;

accent-color:#2962ff;
}

/* =========================
   BODY LOCK
========================= */

body.popup-open{
overflow:hidden;
}