/* ================= GLOBAL ================= */

body{

font-family: "Segoe UI", sans-serif;
margin:0;
color:#e2e8f0;

background:
radial-gradient(circle at 20% 20%, #1e293b 0%, transparent 40%),
radial-gradient(circle at 80% 10%, #312e81 0%, transparent 35%),
radial-gradient(circle at 50% 80%, #020617 0%, #000000 70%);

min-height:100vh;

}



/* ================= LAYOUT ================= */

.dashboard{

max-width:1200px;
margin:auto;
padding:40px;

}



/* ================= HEADER ================= */

.header-security{

text-align:center;
margin-bottom:45px;

}

.security-title{

font-size:36px;
font-weight:600;

background:linear-gradient(90deg,#60a5fa,#a78bfa);
-webkit-background-clip:text;
color:transparent;

letter-spacing:1px;

}

.security-subtitle{

font-size:20px;
color:#c7d2fe;
margin-top:10px;

}

.security-desc{

font-size:14px;
color:#94a3b8;

max-width:720px;
margin:18px auto;

line-height:1.6;

}

.divider{

width:120px;
height:2px;

background:linear-gradient(90deg,#6366f1,#8b5cf6);

margin:15px auto;

box-shadow:0 0 12px rgba(99,102,241,0.8);

}



/* ================= AES SELECTOR ================= */

.aes-selector{

display:flex;
justify-content:center;
gap:30px;
margin-bottom:50px;

}

.aes-heading{

text-align: center;
width: 100%;

margin: 30px auto;

font-size: 26px;
font-weight: 600;

color: #c7d2fe;

}

.aes-btn{

width:160px;
height:70px;

font-size:20px;
font-weight:600;

border-radius:14px;
border:1px solid rgba(99,102,241,0.4);

background:linear-gradient(
145deg,
rgba(30,41,59,0.9),
rgba(15,23,42,0.9)
);

color:#e2e8f0;

cursor:pointer;

transition:all 0.25s ease;

box-shadow:0 0 12px rgba(99,102,241,0.25);

}



.aes-btn:hover{

transform:translateY(-3px) scale(1.04);

background:linear-gradient(
145deg,
#4338ca,
#6366f1
);

box-shadow:
0 0 18px rgba(99,102,241,0.8),
0 0 35px rgba(139,92,246,0.6);

}



.aes-btn.active{

border:2px solid #a5b4fc;

box-shadow:
0 0 25px rgba(99,102,241,1);

background:linear-gradient(
145deg,
#6366f1,
#8b5cf6
);

}



/* ================= GRID ================= */

.grid{

display:grid;
grid-template-columns:1fr 1fr;
gap:35px;

}



/* ================= CARD ================= */

.card{

background:rgba(15,23,42,0.9);

padding:30px;

border-radius:14px;

border:1px solid rgba(99,102,241,0.25);

box-shadow:0 0 25px rgba(99,102,241,0.15);

backdrop-filter:blur(10px);

}



/* ================= INPUT ================= */

textarea,
input{

width:100%;
margin-top:12px;
padding:11px;

border-radius:8px;

border:1px solid #334155;

background:#020617;
color:#e2e8f0;

font-size:14px;

transition:all 0.2s ease;

}



textarea{

height:95px;

}



textarea:focus,
input:focus{

outline:none;

border-color:#6366f1;

box-shadow:0 0 8px rgba(99,102,241,0.6);

}



/* ================= MODE BUTTON ================= */

.mode-buttons{

display:flex;
gap:12px;
margin-top:15px;

}



.mode-buttons button{

flex:1;
padding:10px;

border:none;
border-radius:8px;

background:#1e293b;
color:#e2e8f0;

font-weight:500;

cursor:pointer;

transition:0.25s;

}



.mode-buttons button:hover{

background:#4338ca;

}



.mode-buttons button.active{

background:#6366f1;

box-shadow:0 0 10px #6366f1;

}



/* ================= ACTION BUTTON ================= */

.action-btn{

margin-top:18px;
width:100%;
padding:13px;

border:none;
border-radius:10px;

background:linear-gradient(90deg,#6366f1,#8b5cf6);

color:white;
font-weight:600;

font-size:15px;

cursor:pointer;

transition:0.25s;

}



.action-btn:hover{

transform:translateY(-1px);

box-shadow:0 0 18px rgba(139,92,246,0.9);

}



/* ================= RESULT BOX ================= */

pre{

background:#020617;

padding:12px;

border-radius:8px;
margin-top:12px;

border:1px solid #334155;

color:#38bdf8;

font-size:14px;

overflow:auto;

}



/* ================= UTIL ================= */

.hidden{

display:none;

}