/* ── Aroma Tier Cards ── */
.aroma-tier-cards { display: flex; gap: 16px; margin-bottom: 24px; }
.aroma-tier-card {
  flex: 1;
  background: #fff;
  border: 1px solid var(--whic-border);
  border-radius: var(--whic-radius);
  padding: 20px;
  text-align: center;
  transition: box-shadow .2s, transform .15s;
}
.aroma-tier-card:not(.locked):hover { box-shadow: var(--whic-card-shadow); transform: translateY(-1px); }
.aroma-tier-card.locked { opacity: 0.5; }
.aroma-tier-card.completed { border-color: var(--whic-green); }
.aroma-tier-card .tier-icon { font-size: 28px; color: var(--whic-green); margin-bottom: 8px; }
.aroma-tier-card.locked .tier-icon { color: var(--whic-text-light); }
.aroma-tier-card h4 { font-size: 16px; margin: 0 0 4px; }
.aroma-tier-card .tier-desc { font-size: 12px; color: var(--whic-text-light); margin-bottom: 12px; line-height: 1.4; }
.aroma-tier-card .tier-progress { font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.aroma-tier-card .tier-progress.done { color: var(--whic-green); }
.aroma-tier-card .btn-tier {
  display: inline-block; padding: 6px 18px; border-radius: 20px; font-size: 13px; font-weight: 600;
  border: 1.5px solid var(--whic-green); color: var(--whic-green); background: #fff; cursor: pointer;
  transition: all .2s;
}
.aroma-tier-card .btn-tier:hover { background: var(--whic-green); color: #fff; }
.aroma-tier-card.locked .btn-tier { border-color: var(--whic-border); color: var(--whic-text-light); cursor: default; }
.aroma-tier-card.locked .btn-tier:hover { background: #fff; color: var(--whic-text-light); }