body{
margin:0;
font-family:'Segoe UI',sans-serif;
background:linear-gradient(135deg,#0f2027,#203a43,#2c5364);
display:flex;
justify-content:center;
align-items:center;
height:100vh;
color:white;
}

/* BIG CONTAINER */
.container{
background:rgba(255,255,255,0.05);
backdrop-filter:blur(15px);
padding:50px;
width:900px;
max-width:95%;
border-radius:20px;
box-shadow:0 20px 60px rgba(0,0,0,0.5);
text-align:center;
transition:0.4s;
}

/* GREETING TOP */
#greeting{
font-size:20px;
margin-bottom:10px;
opacity:0.9;
}

/* TITLE */
h2{
color:#00ffcc;
font-size:34px;
margin-bottom:20px;
}

/* INPUT */
input,textarea{
width:100%;
padding:18px;
margin-top:15px;
border-radius:12px;
border:none;
background:rgba(255,255,255,0.08);
color:white;
font-size:17px;
outline:none;
}

/* TEXTAREA BIG */
textarea{
height:200px;
}

/* BUTTON */
button{
margin-top:25px;
width:100%;
padding:16px;
background:linear-gradient(135deg,#00ffcc,#00c9a7);
border:none;
color:black;
border-radius:12px;
font-size:18px;
cursor:pointer;
font-weight:bold;
transition:0.3s;
}

button:hover{
transform:scale(1.05);
box-shadow:0 10px 25px rgba(0,255,204,0.4);
}

/* RESULT BOX */
#resultBox{
margin-top:25px;
background:rgba(0,0,0,0.3);
padding:25px;
border-radius:15px;
min-height:180px;
text-align:left;
white-space:pre-line;
font-size:17px;
line-height:1.7;
}

/* AI QUESTION */
#aiQuestion{
margin-top:10px;
font-size:18px;
color:#cccccc;
}

/* RESPONSIVE */
@media(max-width:600px){
.container{
padding:30px;
}
h2{
font-size:26px;
}
}

/* 🔥 CARD GLOW EFFECT */

.container{
position:relative;
overflow:hidden;
}

/* Glow border animation */
.container::before{
content:"";
position:absolute;
top:-2px;
left:-2px;
right:-2px;
bottom:-2px;
background:linear-gradient(
45deg,
#00ffcc,
#00c3ff,
#7a00ff,
#ff00c8,
#00ffcc
);
background-size:400%;
border-radius:22px;
z-index:-1;
animation:glow 6s linear infinite;
}

/* Inner layer (glass look maintain) */
.container::after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:rgba(255,255,255,0.05);
border-radius:20px;
z-index:-1;
}

/* Animation */
@keyframes glow{
0%{background-position:0 0;}
50%{background-position:400% 0;}
100%{background-position:0 0;}
}
.container:hover{
transform:scale(1.02);
transition:0.3s;
}