body{
margin:0;
font-family:monospace;
background:black;
color:#00ff9c;
text-align:center;
overflow-y:auto;
overflow-x:hidden;
}

#matrix{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:-1;
pointer-events:none;
}

.app{
width:650px;
margin:auto;
margin-top:60px;
background:rgba(0,0,0,0.8);
backdrop-filter:blur(10px);
padding:40px;
border-radius:12px;
box-shadow:0 0 30px #00ff9c55;
min-height:900px;
}

.upload{
border:2px dashed #00ff9c;
padding:35px;
margin:20px;
cursor:pointer;
}

textarea,input{
width:90%;
padding:12px;
margin:10px;
background:#111;
border:none;
border-radius:6px;
color:#00ff9c;
}

textarea{
height:110px;
}

button{
padding:12px 20px;
margin:10px;
background:#00ff9c;
border:none;
border-radius:6px;
font-weight:bold;
cursor:pointer;
}

button:hover{
background:#00cc7a;
}

.progress{
width:100%;
height:8px;
background:#111;
border-radius:10px;
}

#progressBar{
width:0%;
height:100%;
background:#00ff9c;
}

img{
max-width:100%;
margin-top:20px;
}

.output{
margin-top:20px;
}

#decodedText{
font-size:18px;
}

canvas{
display:none;
}

.output button{
background:#00ff9c;
color:black;
font-weight:bold;
}

section{
width:800px;
margin:auto;
margin-top:80px;
padding:40px;
background:rgba(0,0,0,0.7);
border-radius:10px;
box-shadow:0 0 20px #00ff9c44;
}

section h2{
color:#00ff9c;
margin-bottom:20px;
}

.compare-box{
display:flex;
justify-content:space-around;
flex-wrap:wrap;
}

.compare-box img{
width:300px;
border-radius:6px;
margin-top:10px;
}

footer{
margin-top:80px;
padding:30px;
background:black;
color:#00ff9c;
}

.analyzer{
width:800px;
margin:auto;
margin-top:80px;
padding:40px;
background:rgba(0,0,0,0.7);
border-radius:10px;
box-shadow:0 0 20px #00ff9c44;
}

.terminal{
width:800px;
margin:auto;
margin-top:80px;
padding:40px;
background:rgba(0,0,0,0.9);
border-radius:10px;
box-shadow:0 0 25px #00ff9c66;
}

.console{
background:black;
padding:20px;
text-align:left;
height:200px;
overflow:auto;
font-size:14px;
border:1px solid #00ff9c;
}

.console p{
margin:5px 0;
color:#00ff9c;
}

button{
box-shadow:0 0 10px #00ff9c;
transition:0.3s;
}

button:hover{
box-shadow:0 0 20px #00ff9c;
}

.heatmap{
width:800px;
margin:auto;
margin-top:80px;
padding:40px;
background:rgba(0,0,0,0.7);
border-radius:10px;
box-shadow:0 0 20px #00ff9c44;
}

#heatmapCanvas{
max-width:100%;
margin-top:20px;
}

#capacityInfo{
margin-top:5px;
font-size:14px;
color:#00ff9c;
}