body{
background:
radial-gradient(circle at top,#5a1c8c 0%,#0b0f17 60%),
linear-gradient(180deg,#1b1033,#0b0f17);
color:white;
font-family:Arial, sans-serif;
text-align:center;
padding:40px;
}

/* TITLE */

h1{
font-size:40px;
margin-bottom:25px;
color:#cbd6ff;
}

/* LANGUAGE BUTTONS */

.languages{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:10px;
margin-bottom:30px;
}

.langBtn{
background:rgba(255,255,255,0.05) !important;
color:#ffd9ff !important;
border:1px solid rgba(255,0,200,0.45) !important;
border-radius:30px !important;
padding:10px 22px !important;
margin:6px !important;
font-size:14px !important;
cursor:pointer !important;
box-shadow:
0 0 10px rgba(255,0,200,0.35),
inset 0 0 8px rgba(255,255,255,0.04) !important;
transition:all 0.25s ease !important;
}

.langBtn:hover{
background:rgba(255,0,200,0.12) !important;
color:white !important;
box-shadow:
0 0 18px rgba(255,0,200,0.65),
inset 0 0 10px rgba(255,255,255,0.06) !important;
transform:translateY(-2px);
}

/* CONTROL BUTTONS */

.controls button{
background:linear-gradient(90deg,#ff4da6,#ff6fd8);
border:none;
color:white;
padding:12px 28px;
border-radius:14px;
margin:8px;
font-size:15px;
cursor:pointer;
box-shadow:0 0 15px rgba(255,90,200,0.5);
transition:0.25s;
}

.controls button:hover{
transform:translateY(-2px);
box-shadow:0 0 25px rgba(255,90,200,0.9);
}

/* CONVERSATION PANEL */

#conversation{
margin-top:30px;
width:750px;
margin-left:auto;
margin-right:auto;
padding:40px;
border-radius:20px;

background:rgba(20,25,50,0.8);

box-shadow:
0 0 40px rgba(255,0,200,0.25),
inset 0 0 20px rgba(255,255,255,0.03);

border:1px solid rgba(255,0,200,0.3);
}

/* BOT MESSAGE */

.bot{
background:rgba(255,255,255,0.06);
padding:16px;
border-radius:12px;
margin-bottom:15px;
font-size:20px;
color:#d7dbff;
}

/* USER MESSAGE */

.user{
background:#2f6f4a;
padding:16px;
border-radius:12px;
margin-bottom:15px;
text-align:right;
font-size:20px;
color:white;
}

/* RESULT */

#result{
font-size:70px;
margin-top:25px;
color:#fff;
}

/* BUILDER MASK */

.builderMask{
position:relative;
margin-bottom:30px;
}

/* hidden builder */

.hiddenBuilder{
opacity:0;
pointer-events:none;
height:0;
overflow:hidden;
transition:0.4s ease;
}

/* revealed */

.builderVisible{
filter:none;
opacity:1;
pointer-events:auto;
}

/* toggle button */

#toggleBuilder{
position:absolute;
top:-15px;
right:0;

background:linear-gradient(90deg,#ff4da6,#ff6fd8);
border:none;
color:white;
padding:8px 14px;
border-radius:10px;
cursor:pointer;

box-shadow:
0 0 10px rgba(255,0,200,0.7),
0 0 20px rgba(255,0,200,0.4);
}

/* LOCK PANEL */

.codePanel{
margin-top:10px;
display:flex;
justify-content:center;
gap:8px;
}

.hiddenCode{
display:none;
}

#codeInput{
width:80px;
padding:6px;
border-radius:8px;
border:none;
text-align:center;
background:#0b0f17;
color:white;
border:1px solid #ff4da6;
}

#unlockBtn{
background:linear-gradient(90deg,#ff4da6,#ff6fd8);
border:none;
color:white;
padding:6px 12px;
border-radius:8px;
cursor:pointer;
}

.toggleBox input{
appearance:none;
width:60px;
height:28px;
background:#222;
border-radius:20px;
position:relative;
cursor:pointer;
border:1px solid #ff4da6;
}

.toggleBox input::before{
content:"";
width:24px;
height:24px;
background:white;
border-radius:50%;
position:absolute;
top:1px;
left:2px;
transition:0.25s;
}

.toggleBox input:checked{
background:#00ff88;
}

.toggleBox input:checked::before{
left: 272px;
}










/* MOBILE VERSION */

@media (max-width: 700px){

body{
padding:20px;
}

h1{
font-size:28px;
}

.languages{
flex-wrap:wrap;
gap:8px;
}

.langBtn{
font-size:13px;
padding:8px 14px;
}

.controls button{
width:90%;
margin:8px auto;
display:block;
}

#conversation{
width:100%;
padding:20px;
}

.bot,
.user{
font-size:16px;
padding:12px;
}

#result{
font-size:50px;
}

}
.builder{
margin-bottom:30px;
}

.builder input{
padding:10px;
width:300px;
border-radius:8px;
border:none;
margin-left:10px;
}

#jsonOutput{
width:700px;
max-width:95%;
height:150px;
margin-top:15px;
padding:10px;
border-radius:10px;
background:#0b0f17;
color:white;
border:1px solid #ff4da6;
}