*{

margin:0;

padding:0;

box-sizing:border-box;

font-family:

Inter,
Segoe UI,
sans-serif;

}

body{

height:100vh;

overflow:hidden;

background:

linear-gradient(

180deg,

#050C14,

#07121E

);

display:flex;

justify-content:center;

align-items:center;

}

#loading{

display:flex;

flex-direction:column;

align-items:center;

animation:

fade

1.2s
ease;

}

.logo{

color:

white;

font-size:72px;

font-weight:900;

letter-spacing:10px;

text-shadow:

0
0
40px

rgba(
77,
184,
255,
0.25
);

}

.subtitle{

margin-top:18px;

color:

#4DB8FF;

font-size:14px;

letter-spacing:5px;

}

.subtitle::after{

content:'';

display:inline-block;

width:20px;

animation:

blink

1s

infinite;

}

@keyframes blink{

0%{
opacity:0;
}

50%{
opacity:1;
}

100%{
opacity:0;
}

}

@keyframes fade{

from{

opacity:0;

transform:

translateY(
20px
);

}

to{

opacity:1;

transform:

translateY(
0
);

}

}

@media(max-width:700px){

.logo{

font-size:42px;

letter-spacing:6px;

}

.subtitle{

font-size:11px;

}

}
.monitor{

height:100vh;

background:

linear-gradient(

180deg,

#050C14,

#07121E

);

padding:34px;

color:white;

}

.topbar{

display:flex;

justify-content:space-between;

align-items:center;

}

.logo-small{

font-size:32px;

font-weight:900;

letter-spacing:6px;

}

.subtitle-small{

margin-top:8px;

color:

#4DB8FF;

font-size:13px;

letter-spacing:2px;

}

#logout{

width:180px;

height:58px;

border:none;

border-radius:18px;

background:

linear-gradient(

90deg,

#902626,

#D64D4D

);

color:white;

font-size:15px;

font-weight:700;

cursor:pointer;

}

.dashboard{

margin-top:32px;

display:grid;

grid-template-columns:

repeat(
3,
1fr
);

gap:20px;

}

.card{

background:

rgba(
13,
24,
37,
0.9
);

border:

1px
solid

rgba(
77,
184,
255,
0.15
);

padding:28px;

border-radius:24px;

}

.label{

color:

#7A91A8;

font-size:13px;

letter-spacing:2px;

}

.value{

margin-top:12px;

font-size:42px;

font-weight:800;

color:

#4DB8FF;

}

.map{

margin-top:30px;

height:

calc(
100vh
-----

290px
);

border-radius:30px;

background:

linear-gradient(

180deg,

#0D1825,

#07121E

);

display:flex;

justify-content:center;

align-items:center;

font-size:28px;

color:

#4DB8FF;

border:

1px
solid

rgba(
77,
184,
255,
0.15
);

}

@media(max-width:900px){

.dashboard{

grid-template-columns:
1fr;

}

}