.tn-translate-block{
  border:1px solid #ddd;
  padding:12px;
  border-radius:10px;
  max-width:760px;
}

.tn-translate-row{
  display:flex;
  gap:10px;
  align-items:stretch;
}

.tn-translate-input{
  flex:1 1 auto;
  padding:10px 12px;
  border:1px solid #bbb;
  border-radius:8px;
  font-size:16px;
  min-width: 0;
}

.tn-translate-button{
  flex:0 0 auto;
  padding:10px 16px;
  border-radius:8px;
  border:1px solid #333;
  background:#fff !important;
  color:#111 !important;
  cursor:pointer;
  line-height:1.2;
  font-weight:600;
}

.tn-translate-button:hover,
.tn-translate-button:focus{
  background:#2271b1 !important;
  color:#fff !important;
  border-color:#2271b1 !important;
}

.tn-translate-button[disabled]{
  opacity:0.65;
  cursor:wait;
}

.tn-translate-example{
  margin-top:6px;
  opacity:0.8;
}

.tn-translate-result{
  margin-top:10px;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap: wrap;
}

.tn-output{
  font-size:18px;
  font-weight:700;
}

.tn-actions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

.tn-action-button,
.tn-speak,
.tn-copy{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:8px 14px;
  border-radius:8px;
  border:1px solid #2271b1 !important;
  background:#2271b1 !important;
  color:#fff !important;
  cursor:pointer;
  font-weight:600;
  line-height:1.2;
  text-decoration:none;
  box-shadow:none;
}

.tn-action-button:hover,
.tn-action-button:focus,
.tn-speak:hover,
.tn-speak:focus,
.tn-copy:hover,
.tn-copy:focus{
  background:#135e96 !important;
  border-color:#135e96 !important;
  color:#fff !important;
}

.tn-speak{
  min-width:88px;
}

.tn-copy{
  min-width:88px;
}

.tn-error{
  font-size:14px;
  font-weight:600;
  color:#b32d2e;
}

.tn-status{
  font-size:14px;
  font-weight:600;
}

@media (max-width: 520px){
  .tn-translate-row{
    flex-direction: column;
  }
  .tn-translate-button{
    width: 100%;
  }
}