```css
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Segoe UI',sans-serif;
}

body{
background:
linear-gradient(180deg,#010b1d,#021a3f);
color:white;
overflow:hidden;
height:100vh;
}

.background-grid{
position:fixed;
width:100%;
height:100%;
background:
radial-gradient(circle,#00d9ff22 1px,transparent 1px);
background-size:30px 30px;
opacity:.4;
z-index:-1;
}

section{
width:100%;
height:100vh;
display:flex;
justify-content:center;
align-items:center;
}

#loadingScreen,
#studentScreen,
#graduationPopup{
display:none;
}

.main-panel{
width:90%;
max-width:1400px;
display:flex;
gap:40px;
}

.left-panel,
.right-panel,
.student-panel{

background:
rgba(0,25,60,.65);

border:2px solid #00d9ff;

box-shadow:
0 0 15px #00d9ff,
0 0 30px #00d9ff33;

backdrop-filter:blur(10px);

border-radius:20px;
}

.left-panel{
width:45%;
padding:30px;
text-align:center;
}

.right-panel{
width:55%;
padding:40px;
}

.logo{
width:100px;
margin-bottom:20px;
}

.left-panel h1{
font-size:42px;
color:white;
}

.left-panel p{
margin-top:10px;
font-size:20px;
color:#8be9ff;
}

.hand-container{
margin-top:40px;
}

.handscan{
width:320px;
cursor:pointer;
filter:
drop-shadow(0 0 20px cyan);
animation:pulse 2s infinite;
}

@keyframes pulse{
0%{
transform:scale(1);
}
50%{
transform:scale(1.05);
}
100%{
transform:scale(1);
}
}

.right-panel h2{
font-size:42px;
color:#00d9ff;
margin-bottom:20px;
}

.right-panel p{
margin-bottom:30px;
}

input{
width:100%;
padding:20px;
font-size:32px;
text-align:center;

background:#001a33;

border:2px solid #00d9ff;

border-radius:15px;

color:white;
}

.scan-button{

margin-top:30px;

width:100%;

padding:20px;

font-size:24px;

background:#003366;

border:2px solid #00d9ff;

border-radius:15px;

color:white;

cursor:pointer;

transition:.3s;
}

.scan-button:hover{
background:#0055aa;
}

.loading-panel{

width:800px;

padding:50px;

background:#001933;

border:2px solid #00d9ff;

border-radius:20px;

text-align:center;
}

.progress-container{

width:100%;

height:30px;

background:#001122;

border-radius:20px;

margin-top:30px;

overflow:hidden;
}

#progressBar{

height:100%;

width:0%;

background:
linear-gradient(
90deg,
#00d9ff,
#66ffff
);

transition:3s linear;
}

#loadingText{
margin-top:20px;
font-size:22px;
}

.student-panel{

width:1200px;

display:flex;

padding:30px;

gap:30px;
}

.student-photo img{

width:320px;

border-radius:20px;

border:3px solid cyan;
}

.student-data{
flex:1;
}

.student-data h2{

font-size:40px;

margin-bottom:30px;

color:#00d9ff;
}

.info-row{

margin-bottom:25px;

padding-bottom:15px;

border-bottom:
1px solid #00d9ff44;
}

.info-row label{

display:block;

font-size:18px;

color:#8be9ff;
}

.info-row span{

font-size:34px;

font-weight:bold;
}


#graduationPopup{

position:fixed;

top:0;
left:0;

background:
rgba(0,0,0,.6);

backdrop-filter:blur(6px);

z-index:999;
}

.popup-box{

width:700px;

padding:40px;

text-align:center;

background:
rgba(0,20,50,.95);

border:3px solid #00d9ff;

border-radius:25px;

box-shadow:
0 0 20px cyan;
}

.popup-check{

font-size:80px;

color:#00ff66;

margin-bottom:20px;
}

.popup-box h1{

font-size:90px;

line-height:1.1;

color:#ffd700;

text-shadow:
0 0 15px gold,
0 0 30px gold;
}

.popup-buttons{

margin-top:30px;

display:flex;

justify-content:center;

gap:20px;
}

.popup-buttons button{

padding:18px 25px;

font-size:20px;

border:none;

border-radius:15px;

cursor:pointer;

background:#004488;

color:white;
}

#fireworksCanvas{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

pointer-events:none;

z-index:1000;
}
```