*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Poppins,sans-serif;
}

body{

min-height:100vh;

display:flex;
justify-content:center;
align-items:center;

background:linear-gradient(135deg,#4facfe,#00f2fe);

padding:40px;

}

.container{

width:100%;
max-width:850px;

}

.card{

background:rgba(255,255,255,.18);

backdrop-filter:blur(18px);

border-radius:25px;

padding:45px;

box-shadow:0 20px 50px rgba(0,0,0,.2);

color:white;

}

h1{

text-align:center;

font-size:38px;

margin-bottom:10px;

}

.subtitle{

text-align:center;

margin-bottom:35px;

opacity:.9;

}

label{

font-weight:600;

display:block;

margin-bottom:10px;

}

textarea{

width:100%;

height:170px;

padding:18px;

border:none;

outline:none;

border-radius:15px;

resize:none;

font-size:18px;

}

.counter{

margin-top:10px;

text-align:right;

font-size:13px;

opacity:.8;

}

button{

width:100%;

margin-top:25px;

padding:16px;

font-size:18px;

font-weight:600;

border:none;

border-radius:15px;

cursor:pointer;

background:white;

color:#2193b0;

transition:.3s;

}

button:hover{

transform:translateY(-3px);

}

.loading{

display:none;

text-align:center;

margin-top:25px;

font-size:18px;

}

.result{

margin-top:40px;

}

.urdu-box{

background:white;

color:#111;

padding:25px;

min-height:150px;

border-radius:15px;

font-size:28px;

font-family:"Noto Nastaliq Urdu",serif;

direction:rtl;

line-height:2.2;

}

#copyBtn{

margin-top:20px;

background:#00c853;

color:white;

}

@media(max-width:768px){

.card{

padding:25px;

}

h1{

font-size:28px;

}

textarea{

height:140px;

}

.urdu-box{

font-size:22px;

}

}