*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,sans-serif;
}

body{

background:#07070d;
overflow:hidden;
height:100vh;

}

.background{

position:fixed;
inset:0;

}

.blur{

position:absolute;
border-radius:50%;
filter:blur(120px);

}

.blur1{

width:350px;
height:350px;

background:#7c3aed;

top:-120px;
left:-120px;

opacity:.45;

}

.blur2{

width:300px;
height:300px;

background:#2563eb;

bottom:-100px;
right:-100px;

opacity:.4;

}

.lines{

position:absolute;
inset:0;

background-image:

linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),

linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);

background-size:45px 45px;

opacity:.18;

}

.page{

position:absolute;

inset:0;

display:flex;

justify-content:center;

align-items:center;

flex-direction:column;

opacity:0;

visibility:hidden;

transition:.4s;

}

.page.active{

opacity:1;

visibility:visible;

}

.logo-box{

position:relative;

width:150px;
height:150px;

display:flex;

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

margin-bottom:25px;

}

.ring{

position:absolute;

width:150px;
height:150px;

border-radius:50%;

border:3px solid #8b5cf6;

border-top-color:#3b82f6;

animation:spin 2s linear infinite;

box-shadow:

0 0 25px #8b5cf6,

0 0 50px #3b82f6;

}

.logo{

font-size:55px;

}

h1{

color:white;

letter-spacing:8px;

margin-bottom:10px;

}

#status{

color:#a1a1aa;

margin-bottom:25px;

}

.progress{

width:260px;

height:8px;

border-radius:30px;

overflow:hidden;

background:#222;

}

#bar{

height:100%;

width:0;

background:linear-gradient(90deg,#2563eb,#8b5cf6);

box-shadow:0 0 20px #8b5cf6;

transition:.4s;

}

.card{

width:320px;

padding:35px;

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

backdrop-filter:blur(15px);

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

border-radius:24px;

text-align:center;

box-shadow:

0 0 35px rgba(139,92,246,.3);

}

.lock{

font-size:65px;

margin-bottom:15px;

}

.card h2{

color:white;

margin-bottom:15px;

}

.card p{

color:#b4b4b4;

line-height:28px;

margin-bottom:25px;

}

.btn{

display:inline-block;

padding:14px 28px;

border-radius:16px;

background:linear-gradient(90deg,#2563eb,#8b5cf6);

color:white;

text-decoration:none;

transition:.25s;

}

.btn:hover{

transform:scale(1.05);

}

@keyframes spin{

to{

transform:rotate(360deg);

}

}


table{

width:100%;
border-collapse:collapse;
margin-top:20px;

}


td{

padding:12px;
border-bottom:1px solid #333;
text-align:left;

}


td:first-child{

font-weight:bold;

}



button{

margin-top:20px;
padding:12px 30px;
border-radius:10px;
border:none;
cursor:pointer;

}


.ip-card{

width:350px;
padding:30px;

}


.ip-card h2{

color:white;
margin-bottom:20px;

}


.ip-card table{

background:rgba(255,255,255,.05);
border-radius:15px;
overflow:hidden;

}


.ip-card td{

color:#ddd;

}


.ip-card td:first-child{

color:#8b5cf6;

}


.ip-card .btn{

margin-top:25px;
cursor:pointer;

}