.translator {
  display: grid;
  gap: 18px;
  padding: 28px;
  border: 1px solid rgba(75, 58, 115, 0.12);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(75, 58, 115, 0.08);
}
.translator label,
.translator__pane > span {
  color: var(--info-purple);
  font-size: 14px;
  font-weight: 700;
}
.translator__languages {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: 12px;
}
.translator__languages label { display: grid; gap: 6px; }
.translator select,
.translator textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(75, 58, 115, 0.2);
  border-radius: 12px;
  background: #fff;
  color: #2b2440;
  font: inherit;
  font-weight: 500;
}
.translator select { min-height: 46px; padding: 0 12px; }
.translator textarea { display: block; min-height: 220px; padding: 14px; resize: vertical; }
.translator__swap {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(75, 58, 115, 0.2);
  border-radius: 12px;
  background: #fff;
  color: var(--info-purple);
  font-size: 18px;
  cursor: pointer;
}
.translator__swap:hover,
.translator__swap:focus-visible { background: #f4f1fa; outline: none; }
.translator__panes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.translator__pane { position: relative; display: grid; align-content: start; gap: 6px; min-width: 0; }
.translator__output {
  min-height: 220px;
  box-sizing: border-box;
  padding: 14px;
  border-radius: 12px;
  background: #f6f4fb;
  color: #2b2440;
  font-weight: 500;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.translator__output:empty::before { content: attr(data-placeholder); color: var(--info-muted); }
.translator__count { justify-self: end; color: var(--info-muted); font-size: 13px; font-weight: 500; }
.translator__copy {
  justify-self: end;
  padding: 4px 10px;
  border: 1px solid rgba(75, 58, 115, 0.2);
  border-radius: 8px;
  background: #fff;
  color: var(--info-purple);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.translator__actions { display: flex; }
.translator__error { margin: 0; color: #c91f58; font-weight: 700; }
.translator__note { margin: 0; color: var(--info-muted); font-size: 14px; }
@media (max-width: 720px) {
  .translator { padding: 18px; }
  .translator__panes { grid-template-columns: minmax(0, 1fr); }
  .translator textarea, .translator__output { min-height: 150px; }
}