.translate-container{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:start}
.translate-box{border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}
.translate-header{background:#f7fafc;padding:12px;border-bottom:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center}
.translate-body{padding:0}
.translate-textarea{width:100%;min-height:200px;padding:16px;border:none;resize:vertical;font-size:14px;line-height:1.6}
.translate-footer{background:#f7fafc;padding:12px;border-top:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center}
.lang-select{padding:6px 12px;border:1px solid #e2e8f0;border-radius:6px;background:#fff;cursor:pointer}
.swap-btn{width:40px;height:40px;border-radius:50%;background:#667eea;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s}
.swap-btn:hover{background:#5568d3;transform:rotate(180deg)}
.char-count{font-size:12px;color:#718096}
.quick-phrases{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.phrase-tag{padding:6px 12px;background:#edf2f7;border-radius:999px;cursor:pointer;font-size:13px;color:#4a5568;transition:all 0.2s}
.phrase-tag:hover{background:#667eea;color:#fff}
.history-item{padding:12px;border:1px solid #e2e8f0;border-radius:8px;margin-bottom:8px;cursor:pointer;transition:all 0.2s}
.history-item:hover{background:#f7fafc}
.history-text{font-size:13px;color:#2d3748;margin-bottom:4px}
.history-meta{font-size:11px;color:#718096}
.alert{padding:12px;border-radius:8px;background:#e6f7ff;border:1px solid #91d5ff;color:#0050b3;margin-bottom:12px}
@media (max-width: 768px) {
  .translate-container{grid-template-columns:1fr;gap:12px}
  .swap-btn{transform:rotate(90deg)}
  .swap-btn:hover{transform:rotate(270deg)}
}