.card {
  background: var(--secondary-bg-color); border-radius: 14px; padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.card-title { font-size: 13px; font-weight: 600; color: var(--hint-color); text-transform: uppercase; }
.card-item { display: flex; flex-direction: column; gap: 4px; }
.card-label { font-size: 13px; color: var(--hint-color); font-weight: 500; }
.card-val { font-size: 15px; font-weight: 600; color: var(--text-color); }
.preview-img { width: 100%; max-height: 200px; object-fit: cover; border-radius: 10px; }
.loader { position: fixed; inset: 0; background: rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; z-index: 100; }
.spinner { width: 36px; height: 36px; border: 3px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: #e02424; color: #fff; padding: 10px 16px; border-radius: 10px;
  font-size: 14px; font-weight: 500; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 200;
}