/* =========================================================
   Translation modal (global) — on-the-fly translate view
   ========================================================= */

#tr-modal{
  z-index: 2147483450; /* above most UI */
}

.tr-modal-content{
  max-width: 980px;
}

.tr-modal-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.tr-lang-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.tr-lang-select{
  min-width: 240px;
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  background: #fff;
  font: inherit;
}

.tr-refresh-btn{
  padding: 6px 10px;
  border-radius: 10px;
}

.tr-grid{
  display:flex;
  gap:12px;
  align-items:stretch;
}

.tr-col{
  flex:1 1 50%;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width: 0;
}

.tr-col-head{
  font-weight: 750;
  color:#111827;
  font-size: 0.92rem;
}

.tr-textarea{
  min-height: 220px;
  resize: vertical;
}

#tr-status{
  margin-top: 10px;
  color:#6b7280;
  font-size:0.85rem;
}

@media (max-width: 920px){
  .tr-grid{ flex-direction:column; }
  .tr-lang-select{ min-width: 220px; }
}