/* Generic Card component — mirrors the Flutter AppCard treatment
   (layered gradient, subtle border, heavy shadow, rounded 20px). */
.ui-card {
  border-radius: 20px;
  border: 1px solid var(--card-border);
  background: linear-gradient(155deg, var(--bg-card) 0%, var(--bg-card-soft) 100%);
  box-shadow: 0 16px 36px rgba(3, 7, 18, 0.32);
  position: relative;
  overflow: hidden;
}

.ui-card-title {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--text-main);
  margin-bottom: 0.55rem;
}

.ui-card-body {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-main);
}

.ui-card-body:empty { display: none; }

.ui-card-footer {
  margin-top: 0.85rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.ui-card-footer:empty { display: none; }

/* Tone variants ---------------------------------------------------- */
.ui-card--muted {
  background: linear-gradient(155deg, var(--bg-elevated) 0%, var(--bg-card) 100%);
  box-shadow: 0 10px 24px rgba(3, 7, 18, 0.24);
}

.ui-card--accent {
  background: linear-gradient(155deg,
    color-mix(in srgb, var(--bg-card) 82%, var(--accent-primary) 18%) 0%,
    var(--bg-card-soft) 100%);
  border-color: rgba(245, 158, 11, 0.36);
}

.ui-card--info {
  background:
    linear-gradient(155deg, var(--info-bg), transparent 60%),
    linear-gradient(155deg, var(--bg-card) 0%, var(--bg-card-soft) 100%);
  border-color: color-mix(in srgb, var(--info-border-strong) 38%, transparent);
}

.ui-card--warning {
  background:
    linear-gradient(155deg, var(--warning-bg), transparent 60%),
    linear-gradient(155deg, var(--bg-card) 0%, var(--bg-card-soft) 100%);
  border-color: color-mix(in srgb, var(--warning-border-strong) 38%, transparent);
}

.ui-card--success {
  background:
    linear-gradient(155deg, var(--success-bg), transparent 60%),
    linear-gradient(155deg, var(--bg-card) 0%, var(--bg-card-soft) 100%);
  border-color: color-mix(in srgb, var(--success-border-strong) 38%, transparent);
}