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

.dashboard-main{

max-width:1400px;

margin:auto;

padding:
320px 20px 80px;

display:flex;

flex-direction:column;

gap:28px;
}

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

.dashboard-navbar{

position:fixed;

top:18px;
left:50%;

transform:
translateX(-50%);

width:
calc(100% - 32px);

max-width:1400px;

padding:
16px 22px;

border-radius:24px;

background:
rgba(0,0,0,0.58);

backdrop-filter:
blur(18px);

border:
1px solid rgba(255,255,255,0.06);

box-shadow:
0 0 30px rgba(0,255,153,0.06);

z-index:9999;
}

/* TOP */

.dashboard-navbar-top{

display:flex;

justify-content:space-between;

align-items:center;

gap:18px;
}

/* BOTTOM */

.dashboard-navbar-bottom{

display:flex;

align-items:center;

gap:14px;

margin-top:14px;

flex-wrap:wrap;
}

/* LOGO */

.dashboard-logo{

font-size:1.6rem;

font-weight:700;

color:#00ff99;

text-decoration:none;

text-shadow:
0 0 16px rgba(0,255,153,0.4);

white-space:nowrap;
}

/* LINKS */

.dashboard-links{

display:flex;

align-items:center;

gap:14px;

flex-wrap:wrap;
}

/* NAV LINKS */

.dashboard-links a,
.dashboard-navbar-bottom a{

position:relative;

color:#d0d0d0;

text-decoration:none;

font-size:0.95rem;

padding:
10px 14px;

border-radius:14px;

transition:0.25s;
}

/* HOVER */

.dashboard-links a:hover,
.dashboard-navbar-bottom a:hover{

color:#00ff99;

background:
rgba(255,255,255,0.04);

text-shadow:
0 0 12px rgba(0,255,153,0.4);
}

/* MOBILE */

@media(max-width:768px){

.dashboard-navbar{

top:12px;

width:
calc(100% - 18px);

padding:
16px;
}

.dashboard-navbar-top{

flex-direction:column;

align-items:flex-start;
}

.dashboard-links,
.dashboard-navbar-bottom{

width:100%;

display:flex;

flex-wrap:wrap;

gap:10px;
}

.dashboard-links a,
.dashboard-navbar-bottom a{

flex:1 1 calc(50% - 10px);

text-align:center;
}

.dashboard-logo{

font-size:1.4rem;
}

}

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

.dashboard-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));

gap:24px;
}

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

.dashboard-card{

position:relative;

overflow:hidden;

padding:32px;

border-radius:30px;

background:
linear-gradient(
145deg,
rgba(6,10,6,0.92),
rgba(10,18,10,0.82)
);

border:
1px solid rgba(0,255,153,0.12);

backdrop-filter:
blur(18px);

box-shadow:
0 0 40px rgba(0,255,153,0.08);

transition:0.35s;
}

.dashboard-card::before{

content:"";

position:absolute;

top:-100px;
right:-100px;

width:220px;
height:220px;

background:
radial-gradient(
circle,
rgba(0,255,153,0.14),
transparent 70%
);

pointer-events:none;
}

.dashboard-card:hover{

transform:
translateY(-6px);

border-color:
rgba(0,255,153,0.28);

box-shadow:
0 0 60px rgba(0,255,153,0.14);
}

/* =========================
   GREETING
========================= */

.dashboard-greeting h1{

font-size:3rem;

line-height:1.1;

margin-bottom:14px;

color:white;

word-break:break-word;
}

.dashboard-greeting p{

font-size:1.05rem;

color:#a0a0a0;
}

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

.dashboard-stat-card{

display:flex;

flex-direction:column;

justify-content:center;

min-height:230px;
}

.dashboard-stat-icon{

font-size:2.5rem;

margin-bottom:18px;

filter:
drop-shadow(0 0 12px rgba(0,255,153,0.35));
}

.dashboard-stat-card h2{

font-size:1.5rem;

margin-bottom:12px;

color:white;
}

.dashboard-stat-card p{

font-size:1.05rem;

color:#b0b0b0;

margin-bottom:18px;
}

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

.upgrade-button{

display:inline-flex;

align-items:center;

justify-content:center;

padding:
12px 18px;

border-radius:16px;

background:
linear-gradient(
135deg,
#ffd700,
#ffb700
);

color:black;

text-decoration:none;

font-weight:600;

transition:0.25s;
}

.upgrade-button:hover{

transform:
translateY(-2px);

box-shadow:
0 0 24px rgba(255,215,0,0.35);
}

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

.dashboard-footer{

margin-top:60px;

padding:
40px 24px;

border-top:
1px solid rgba(0,255,153,0.08);

text-align:center;
}

.dashboard-footer h2{

font-size:2.5rem;

margin-bottom:24px;

color:#00ff99;

text-shadow:
0 0 20px rgba(0,255,153,0.45);
}

.dashboard-footer-links{

display:flex;

flex-direction:column;

gap:18px;
}

.dashboard-footer-row{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:16px;
}

.dashboard-footer-button{

display:flex;

align-items:center;

justify-content:center;

min-width:140px;

padding:
12px 18px;

border-radius:16px;

background:
rgba(255,255,255,0.04);

border:
1px solid rgba(255,255,255,0.08);

color:#d0d0d0;

text-decoration:none;

transition:0.25s;
}

.dashboard-footer-button:hover{

transform:
translateY(-2px);

border-color:#00ff99;

color:#00ff99;

box-shadow:
0 0 20px rgba(0,255,153,0.15);
}

.zos-plus-footer{

background:
linear-gradient(
135deg,
rgba(255,215,0,0.14),
rgba(255,170,0,0.10)
);

border:
1px solid rgba(255,215,0,0.24);
}

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

@media(max-width:768px){

.dashboard-main{

padding:
420px 18px 70px;
}

/* STACK NAV */

.dashboard-navbar-top{

flex-direction:column;

align-items:flex-start;
}

.dashboard-links,
.dashboard-navbar-bottom{

width:100%;

display:flex;

flex-direction:column;

gap:12px;
}

/* FULL WIDTH BUTTONS */

.dashboard-links a,
.dashboard-navbar-bottom a{

width:100%;

min-width:unset;
}

/* LOGO */

.dashboard-logo{

font-size:2rem;
}

/* GREETING */

.dashboard-greeting h1{

font-size:1.9rem;

line-height:1.05;
}

.dashboard-greeting p{

font-size:0.95rem;
}

/* CARDS */

.dashboard-card{

padding:26px;
}

.dashboard-stat-card{

min-height:180px;
}

/* FOOTER */

.dashboard-footer h2{

font-size:2rem;
}

.dashboard-footer-row{

flex-direction:column;
}

.dashboard-footer-button{

width:100%;

min-width:unset;
}

}

/* BADGES */

#dashboard-badges{

display:flex;

flex-wrap:wrap;

gap:14px;
}

/* BADGE */

.dashboard-badge{

padding:
12px 18px;

border-radius:16px;

background:
rgba(255,255,255,0.04);

border:
1px solid rgba(255,255,255,0.08);

color:#d0d0d0;

font-size:0.95rem;

backdrop-filter:
blur(10px);
}

/* PROTOTYPE */

.badge-prototype{

border-color:
rgba(0,255,153,0.24);

box-shadow:
0 0 18px rgba(0,255,153,0.12);
}

/* ZOS */

.badge-zos{

border-color:
rgba(0,255,153,0.4);

color:#00ff99;

box-shadow:
0 0 24px rgba(0,255,153,0.2);
}

/* DEV */

.badge-dev{

border-color:
rgba(0,200,255,0.28);

color:#6ad9ff;
}

/* CREATOR */

.badge-creator{

border-color:
rgba(180,0,255,0.28);

color:#d18cff;
}

/* ZOS+ */

.badge-zosplus{

border-color:
rgba(255,215,0,0.28);

color:#ffd700;
}