/* Thêm cho trang công cụ (dùng chung app.css với shop). */
.tool-card { display: flex; flex-direction: column; gap: 6px; }
.tool-card.soon { opacity: .6; }
.tool-icon { font-size: 26px; line-height: 1; }
.vm-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; }
.chip.online { border-color: var(--ok); color: var(--ok); }
.chip.offline { color: var(--muted); }
.tool-actions { flex-wrap: wrap; gap: 8px; }
.tool-actions select { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; }
textarea { width: 100%; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 10px; font: 13px/1.5 ui-monospace, Consolas, monospace; resize: vertical; }
.otp { font: 700 24px/1.2 ui-monospace, Consolas, monospace; letter-spacing: 2px; color: var(--ok); }
.otp-sm { font-size: 16px; }
.mail { padding: 0; }
.mail-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; }
.mail-head::-webkit-details-marker { display: none; }
.mail-head > div { min-width: 0; overflow-wrap: anywhere; }
.mail-frame { width: 100%; height: 520px; border: 0; border-top: 1px solid var(--border); background: #fff; border-radius: 0 0 var(--radius) var(--radius); }
@media (max-width: 640px) {
  .mail-head { flex-direction: column; align-items: flex-start; }
}