*{

box-sizing:border-box;

}



body{


margin:0;


background:
linear-gradient(
135deg,
#080b18,
#111936
);


font-family:

"Microsoft YaHei",
Arial;


color:white;


min-height:100vh;


}



.container{


width:95%;


max-width:900px;


margin:30px auto;


}



.header{


display:flex;


align-items:center;


gap:20px;


margin-bottom:25px;


}



.logo{


width:70px;

height:70px;


border-radius:20px;


background:

linear-gradient(
135deg,
#765cff,
#9b6cff
);


display:flex;


align-items:center;


justify-content:center;


font-size:45px;


}



h1{


margin:0;


font-size:30px;


}


p{

color:#aaa;

}



.panel{


background:

rgba(
255,255,255,.06
);


border:

1px solid

rgba(
255,255,255,.1
);


border-radius:20px;


padding:25px;


margin-bottom:20px;


backdrop-filter:
blur(10px);


}



h2{


font-size:20px;


}



.grid{


display:grid;


grid-template-columns:

repeat(
2,
1fr
);


gap:15px;


}



.item{


display:flex;


flex-direction:column;


gap:8px;


}



label{


color:#aaa;


}



input,
select{


padding:13px;


border-radius:12px;


border:0;


outline:none;


background:#202849;


color:white;


font-size:15px;


}



button{


border:0;


cursor:pointer;


border-radius:12px;


padding:10px 18px;


background:#333d70;


color:white;


}



.start{


width:100%;


margin-top:25px;


padding:16px;


font-size:18px;


background:

linear-gradient(
90deg,
#735cff,
#a46cff
);


}



.progress-box{


height:12px;


background:#222;


border-radius:20px;


overflow:hidden;


}



#progress{


height:100%;


width:0%;


background:#8c70ff;


transition:.3s;


}



.result-head{


display:flex;


justify-content:space-between;


align-items:center;


}



.card{


margin-top:12px;


padding:15px;


background:#192143;


border-radius:15px;


display:flex;


justify-content:space-between;


}



.available{


background:#13c77b;


padding:5px 12px;


border-radius:20px;


}



@media(max-width:600px){


.grid{

grid-template-columns:1fr;

}


}