:root{
  --mtp-bg1:#0f172a;
  --mtp-bg2:#1e293b;
  --mtp-card:rgba(15,23,42,0.75);
  --mtp-border:rgba(255,255,255,0.15);
  --mtp-text:#ffffff;
  --mtp-muted:#cbd5e1;
  --mtp-accent:#38bdf8;
  --mtp-accent-hover:#0ea5e9;
  --mtp-clear:#475569;
  --mtp-clear-hover:#334155;
}

.mtp-wrapper{
  padding:20px;
  display:flex;
  justify-content:center;
  align-items:center;
}

.mtp-container{
  width:100%;
  max-width:700px;
  background:linear-gradient(135deg, var(--mtp-bg1), var(--mtp-bg2));
  border:1px solid var(--mtp-border);
  border-radius:25px;
  padding:25px;
  color:var(--mtp-text);
  box-shadow:0 15px 40px rgba(0,0,0,0.3);
  font-family:Arial, sans-serif;
}

.mtp-title{
  text-align:center;
  margin:0 0 10px;
  color:var(--mtp-text);
  font-size:clamp(28px, 4vw, 42px);
}

.mtp-subtitle{
  text-align:center;
  color:var(--mtp-muted);
  margin:0 0 25px;
  line-height:1.5;
}

.mtp-card{
  background:var(--mtp-card);
  border-radius:18px;
  padding:18px;
  margin-bottom:18px;
  backdrop-filter:blur(15px);
}

.mtp-card label{
  display:block;
  margin-bottom:8px;
  font-weight:700;
  color:var(--mtp-text);
}

.mtp-select,
.mtp-textarea{
  width:100%;
  border:none;
  outline:none;
  border-radius:12px;
  padding:14px;
  font-size:16px;
  color:#0f172a;
  background:#fff;
}

.mtp-select{
  margin-bottom:15px;
}

.mtp-textarea{
  min-height:170px;
  resize:vertical;
}

.mtp-buttons{
  display:flex;
  gap:10px;
  margin-top:15px;
  flex-wrap:wrap;
}

.mtp-btn{
  flex:1;
  min-width:120px;
  padding:12px;
  border:none;
  border-radius:12px;
  cursor:pointer;
  font-size:15px;
  font-weight:bold;
  transition:.3s ease;
}

.mtp-btn-translate{
  background:var(--mtp-accent);
  color:#fff;
}

.mtp-btn-translate:hover{
  background:var(--mtp-accent-hover);
}

.mtp-btn-copy{
  background:#22c55e;
  color:#fff;
}

.mtp-btn-copy:hover{
  background:#16a34a;
}

.mtp-btn-clear{
  background:var(--mtp-clear);
  color:#fff;
}

.mtp-btn-clear:hover{
  background:var(--mtp-clear-hover);
}

.mtp-output{
  min-height:120px;
  background:#020617;
  border-radius:12px;
  padding:15px;
  line-height:1.6;
  word-break:break-word;
  white-space:pre-wrap;
}

.mtp-hint{
  margin-top:10px;
  color:var(--mtp-muted);
  font-size:14px;
}

@media (max-width: 600px){
  .mtp-wrapper{
    padding:12px;
  }
  .mtp-container{
    padding:18px;
    border-radius:20px;
  }
  .mtp-buttons{
    flex-direction:column;
  }
  .mtp-btn{
    width:100%;
  }
}