#app{


position:relative;


width:100vw;

height:100vh;


display:flex;


align-items:center;


justify-content:center;


}



.background{


position:absolute;


inset:-30%;


background:


radial-gradient(

circle at

20% 20%,

rgba(
80,
140,
255,
0.35
),

transparent 35%

),


radial-gradient(

circle at

80% 70%,

rgba(
180,
80,
255,
0.25
),

transparent 40%

),


#050505;


filter:

blur(80px);


animation:

backgroundMove

18s infinite alternate;


}



.dashboard{


position:relative;


width:min(
92vw,
1200px
);


display:grid;


grid-template-columns:

1fr;


gap:24px;


}



.main-card{


padding:48px;


border-radius:32px;


min-height:260px;


}


.main-card h1{


font-size:

clamp(
42px,
6vw,
80px
);



font-weight:

700;


letter-spacing:

-0.05em;


background:

linear-gradient(

120deg,

white,

#9bbcff

);


-webkit-background-clip:text;


color:transparent;


}


.main-card p{


color:

rgba(
255,
255,
255,
0.65
);


font-size:20px;


}

.dashboard-grid{


display:grid;


grid-template-columns:

repeat(
12,
1fr
);


gap:24px;


width:100%;


}



.glass-navbar{


position:fixed;


top:24px;


left:50%;


transform:
translateX(-50%);



display:flex;


align-items:center;


gap:30px;



padding:16px 28px;


border-radius:999px;


background:

rgba(
255,
255,
255,
0.12
);



backdrop-filter:

blur(30px);


border:

1px solid

rgba(
255,
255,
255,
0.2
);



}



.glass-button{


border:none;


background:

rgba(
255,
255,
255,
0.15
);



color:white;


padding:

12px 24px;


border-radius:20px;


cursor:pointer;


}



.ai-orb{


width:160px;


height:160px;


border-radius:50%;


background:


radial-gradient(

circle at 35% 30%,

white,

#80b7ff 30%,

#553cff

);



filter:

blur(.2px);



box-shadow:

0 0 80px

rgba(
100,
150,
255,
.8
);



}



.stats{


padding:28px;


}


.stats .value{


font-size:48px;


font-weight:700;


}


@media(max-width:768px){


.glass-card{


backdrop-filter:

blur(18px);


-webkit-backdrop-filter:

blur(18px);


}



.dashboard-grid{


grid-template-columns:

1fr;


}



}



@media(prefers-reduced-motion){

*{

animation:none!important;

transition:none!important;

}


}


#loader{


position:fixed;

inset:0;

z-index:9999;


display:flex;

align-items:center;

justify-content:center;


background:#050505;


}



.loader-glass{


width:90px;

height:90px;


border-radius:50%;


background:

linear-gradient(

135deg,

rgba(255,255,255,.4),

rgba(255,255,255,.05)

);


backdrop-filter:

blur(30px);


box-shadow:

0 0 80px

rgba(120,180,255,.8);


animation:

loaderPulse

2s infinite;


}



#loader.hide{


opacity:0;

pointer-events:none;


transition:

opacity .6s ease;


}



@keyframes loaderPulse{


0%{

transform:
scale(1);

}


100%{

transform:
scale(1.15);

}


}